<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Js 基础总结及案例 | Saturday_</title><meta name="keywords" content="js,javascript,基础总结"><meta name="author" content="HHR"><meta name="copyright" content="HHR"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="一. JavaScript 介绍(1) 、JavaScript 是什么1. JavaScript 的历史Netscape（网景）在最初将其脚本语言命名为 LiveScript，是布兰登.艾克发明的。后来 Netscape 在与 Sun 合作之后将其改名为 JavaScript。JavaScript 最初受 Java 启发而开始设计的，目的之一就是“看上去像 Java”，因此语法上有类似之处，一些名">
<meta property="og:type" content="article">
<meta property="og:title" content="Js 基础总结及案例">
<meta property="og:url" content="https://codehhr.cn/2021/05/13/js/js/index.html">
<meta property="og:site_name" content="Saturday_">
<meta property="og:description" content="一. JavaScript 介绍(1) 、JavaScript 是什么1. JavaScript 的历史Netscape（网景）在最初将其脚本语言命名为 LiveScript，是布兰登.艾克发明的。后来 Netscape 在与 Sun 合作之后将其改名为 JavaScript。JavaScript 最初受 Java 启发而开始设计的，目的之一就是“看上去像 Java”，因此语法上有类似之处，一些名">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://codehhr.coding.net/p/codehhr/d/images/git/raw/master/js/js.jpeg">
<meta property="article:published_time" content="2021-05-13T07:03:46.000Z">
<meta property="article:modified_time" content="2021-09-12T14:16:13.181Z">
<meta property="article:author" content="HHR">
<meta property="article:tag" content="js">
<meta property="article:tag" content="javascript">
<meta property="article:tag" content="基础总结">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://codehhr.coding.net/p/codehhr/d/images/git/raw/master/js/js.jpeg"><link rel="shortcut icon" href="/img/favicon.ico"><link rel="canonical" href="https://codehhr.cn/2021/05/13/js/js/"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = { 
  root: '/',
  algolia: undefined,
  localSearch: {"path":"search.xml","languages":{"hits_empty":"找不到您查询的内容：${query}"}},
  translate: {"defaultEncoding":2,"translateDelay":0,"msgToTraditionalChinese":"繁","msgToSimplifiedChinese":"简"},
  noticeOutdate: {"limitDay":680,"position":"top","messagePrev":"It has been","messageNext":"days since the last update, the content of the article may be outdated."},
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: true,
    post: false
  },
  runtime: '天',
  date_suffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: {"limitCount":50,"languages":{"author":"作者: HHR","link":"链接: ","source":"来源: Saturday_","info":"著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。"}},
  lightbox: 'fancybox',
  Snackbar: {"chs_to_cht":"你已切换为繁体","cht_to_chs":"你已切换为简体","day_to_night":"你已切换为深色模式","night_to_day":"你已切换为浅色模式","bgLight":"#49b1f5","bgDark":"#121212","position":"top-center"},
  source: {
    jQuery: 'https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js',
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/js/jquery.justifiedGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/css/justifiedGallery.min.css'
    },
    fancybox: {
      js: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js',
      css: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css'
    }
  },
  isPhotoFigcaption: false,
  islazyload: true,
  isanchor: true
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: 'Js 基础总结及案例',
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2021-09-12 22:16:13'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          if (t === 'dark') activateDarkMode()
          else if (t === 'light') activateLightMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
    const fontSizeVal = saveToLocal.get('global-font-size')
    if (fontSizeVal !== undefined) {
      document.documentElement.style.setProperty('--global-font-size', fontSizeVal + 'px')
    }
    
    const detectApple = () => {
      if (GLOBAL_CONFIG_SITE.isHome && /iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
        document.documentElement.classList.add('apple')
      }
    }
    detectApple()
    })(window)</script><script src="/js/jquery.min.js"></script><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/footergradient.css"><link rel="stylesheet" href="/css/scrollbar.css"><link rel="stylesheet" href="/css/animate.min.css"><meta name="generator" content="Hexo 5.4.0"><link rel="alternate" href="/atom.xml" title="Saturday_" type="application/atom+xml">
</head><body><div id="loading-box"><div class="loading-left-bg"></div><div class="loading-right-bg"></div><div class="spinner-box"><div class="configure-border-1"><div class="configure-core"></div></div><div class="configure-border-2"><div class="configure-core"></div></div><div class="loading-word">加载中...</div></div></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "" data-lazy-src="https://pic.mac89.com/pic/202207/02163019_b21acaafef.jpeg" onerror="onerror=null;src='https://pic.mac89.com/pic/202207/02163019_b21acaafef.jpeg'" alt="avatar"/></div><div class="site-data"><div class="data-item is-center"><div class="data-item-link"><a href="/archives/"><div class="headline">文章</div><div class="length-num">87</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/tags/"><div class="headline">标签</div><div class="length-num">120</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/categories/"><div class="headline">分类</div><div class="length-num">31</div></a></div></div></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fas fa-image"></i><span> 照片</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/school/"><i class="fa-fw fas fa-graduation-cap"></i><span> 科大</span></a></li><li><a class="site-page child" href="/wallpaper/"><i class="fa-fw fas fa-image"></i><span> 壁纸</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div><div class="menus_item"><a class="site-page" href="/messageboard/"><i class="fa-fw fas fa-paper-plane"></i><span> 留言板</span></a></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fa fa-list"></i><span> 娱乐</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/music/"><i class="fa-fw fas fa-music"></i><span> 音乐</span></a></li></ul></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://codehhr.coding.net/p/codehhr/d/images/git/raw/master/csslayouts/sunrise.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Saturday_</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fas fa-image"></i><span> 照片</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/school/"><i class="fa-fw fas fa-graduation-cap"></i><span> 科大</span></a></li><li><a class="site-page child" href="/wallpaper/"><i class="fa-fw fas fa-image"></i><span> 壁纸</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div><div class="menus_item"><a class="site-page" href="/messageboard/"><i class="fa-fw fas fa-paper-plane"></i><span> 留言板</span></a></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fa fa-list"></i><span> 娱乐</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/music/"><i class="fa-fw fas fa-music"></i><span> 音乐</span></a></li></ul></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">Js 基础总结及案例</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2021-05-13T07:03:46.000Z" title="发表于 2021-05-13 15:03:46">2021-05-13</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2021-09-12T14:16:13.181Z" title="更新于 2021-09-12 22:16:13">2021-09-12</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/js/">js</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">14.5k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>58分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="Js 基础总结及案例"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="一-JavaScript-介绍"><a href="#一-JavaScript-介绍" class="headerlink" title="一. JavaScript 介绍"></a>一. JavaScript 介绍</h1><h2 id="1-、JavaScript-是什么"><a href="#1-、JavaScript-是什么" class="headerlink" title="(1) 、JavaScript 是什么"></a>(1) 、JavaScript 是什么</h2><h3 id="1-JavaScript-的历史"><a href="#1-JavaScript-的历史" class="headerlink" title="1. JavaScript 的历史"></a>1. JavaScript 的历史</h3><p>Netscape（网景）在最初将其脚本语言命名为 LiveScript，是布兰登.艾克发明的。后来 Netscape 在与 Sun 合作之后将其改名为 JavaScript。JavaScript 最初受 Java 启发而开始设计的，目的之一就是“看上去像 Java”，因此语法上有类似之处，一些名称和命名规范也借自 Java。JavaScript 与 Java 名称上的近似，是当时 Netscape 为了营销考虑与 Sun 微系统达成协议的结果。</p>
<h3 id="2-JavaScript-是什么语言"><a href="#2-JavaScript-是什么语言" class="headerlink" title="2. JavaScript 是什么语言"></a>2. JavaScript 是什么语言</h3><p>可以说：Java 服务器端的编程语言，JavaScript 运行在客户端(浏览器)的编程语言<br>JavaScript(简称 JS)是一种运行在客户端的脚本语言，JavaScript 的解释器被称为 JavaScript 引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在 HTML（标准通用标记语言下的一个应用）网页上使用，用来给 HTML 网页增加动态功能。<br>也可以说，是一门脚本语言、是一门解释性语言、是一门动态类型的语言、是一门基于<br>对象的语言。（不是面向对象）、是一门弱性语言</p>
<h3 id="3-JavaScript-的发展和意义"><a href="#3-JavaScript-的发展和意义" class="headerlink" title="3. JavaScript 的发展和意义"></a>3. JavaScript 的发展和意义</h3><p>最初的目的是为了处理表单的验证操作。JavaScript 发展到现在几乎无所不能，例如：做网页特效、与交互（表单的提交），比如：轮播图、tab 切换、返回顶部。。。<br>例如：网页特效、服务端开发(Node.js)、命令行工具(Node.js)、桌面程序(Electron)、App(Cordova)、控制硬件-物联网(Ruff)、游戏开发(cocos2d-js)</p>
<h3 id="4-JavaScript-和-HTML、CSS-的区别"><a href="#4-JavaScript-和-HTML、CSS-的区别" class="headerlink" title="4. JavaScript 和 HTML、CSS 的区别"></a>4. JavaScript 和 HTML、CSS 的区别</h3><p><code>HTML</code> - 提供网页的结构，提供网页中的内容<br><code>CSS</code> - 用来美化网页<br><code>JavaScript</code> - 可以用来控制网页内容，给网页增加动态的效果</p>
<h3 id="5-JavaScript-的组成"><a href="#5-JavaScript-的组成" class="headerlink" title="5. JavaScript 的组成"></a>5. JavaScript 的组成</h3><p><img src= "" data-lazy-src="https://codehhr.coding.net/p/codehhr/d/images/git/raw/master/js/jscontent.png" alt="js"></p>
<h4 id="（1）ECMAScript-JavaScript-的核心"><a href="#（1）ECMAScript-JavaScript-的核心" class="headerlink" title="（1）ECMAScript - JavaScript 的核心"></a>（1）ECMAScript - JavaScript 的核心</h4><p>ECMA 欧洲计算机制造联合会。JavaScript 的核心，描述了语言的基本语法和数据类型，ECMAScript 是一套标准，定义了一种语言的标准与具体实现无关。</p>
<h4 id="（2）BOM-浏览器对象模型"><a href="#（2）BOM-浏览器对象模型" class="headerlink" title="（2）BOM - 浏览器对象模型"></a>（2）BOM - 浏览器对象模型</h4><p>一套操作浏览器功能的 API。通过 BOM 可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等。Borswer object model</p>
<h4 id="（3）DOM-文档对象模型"><a href="#（3）DOM-文档对象模型" class="headerlink" title="（3）DOM - 文档对象模型"></a>（3）DOM - 文档对象模型</h4><p>一套操作页面元素的 API。DOM 可以把 HTML 看做是文档树，通过 DOM 提供的 API 可以对树上的节点进行操作。Document object model</p>
<h2 id="2-JavaScript-代码写法"><a href="#2-JavaScript-代码写法" class="headerlink" title="(2) JavaScript 代码写法"></a>(2) JavaScript 代码写法</h2><p>CSS 代码写法分为行内样式、嵌入样式（内部）、外部样式、控制台书写。那么，js 的代码可以分四个地方写：<br>1.在 html 的文件中,script 的标签中写 js 代码<br>2.js 代码可以在 html 的标签中写<br>3.在 js 文件中可以写 js 代码,但是需要在 html 页面中引入 script 的标签中的 src=”js 的路径”<br>4.还可以在控制台直接书写 js 代码</p>
<h3 id="3-JavaScript-问题总结"><a href="#3-JavaScript-问题总结" class="headerlink" title="(3) JavaScript 问题总结"></a>(3) JavaScript 问题总结</h3><ol>
<li>在一对 script 的标签中有错误的 js 代码,那么该错误的代码后面的 js 代码不会执行</li>
<li>如果第一对的 script 标签中有错误,不会影响后面的 script 标签中的 js 代码执行</li>
<li>script 的标签中可以写 type=”text/javascript”标准写法或者写 language=”JavaScript”都可以。但是，目前在我们的 html 页面中，type 和 language 都可以省略，原因：html 是遵循 h5 的标准。</li>
<li>有可能会出现这种情况：script 标签中可能同时出现 type 和 language 的写法。</li>
<li>script 标签在页面中可以出现多对。</li>
<li>script 标签一般是放在 body 的标签的最后的，有的时候会在 head 标签中，目前讲课的时候都在 body 标签的后面(body 中的最后)。</li>
<li>如果 script 标签是引入外部 js 文件的作用，那么这对标签中不要写任何的 js 代码，如果要写，重新写一对 script 标签，里面写代码。</li>
</ol>
<h3 id="4-注释"><a href="#4-注释" class="headerlink" title="(4) 注释"></a>(4) 注释</h3><p>单行注释</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// var a;</span></span><br></pre></td></tr></table></figure>

<p>多行注释</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">var a = 1</span></span><br><span class="line"><span class="comment">var b = 1</span></span><br><span class="line"><span class="comment">*/</span></span><br></pre></td></tr></table></figure>

<h1 id="二-JavaScript-变量"><a href="#二-JavaScript-变量" class="headerlink" title="二. JavaScript 变量"></a>二. JavaScript 变量</h1><h2 id="1-变量引入"><a href="#1-变量引入" class="headerlink" title="(1) 变量引入"></a>(1) 变量引入</h2><p><strong>什么是变量</strong><br>变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据<br><strong>为什么要使用变量</strong><br>使用变量可以方便的获取或者修改内存中的数据</p>
<h2 id="2-变量声明和初始化"><a href="#2-变量声明和初始化" class="headerlink" title="(2) 变量声明和初始化"></a>(2) 变量声明和初始化</h2><p><code>var</code> 声明变量</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> age;</span><br></pre></td></tr></table></figure>

<p>变量的赋值</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> age;</span><br><span class="line">age = <span class="number">18</span>;</span><br></pre></td></tr></table></figure>

<p>同时声明多个变量</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> age, name, sex;</span><br><span class="line">age = <span class="number">10</span>;</span><br><span class="line">name = <span class="string">&quot;zs&quot;</span>;</span><br></pre></td></tr></table></figure>

<p>同时声明多个变量并赋值</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> age = <span class="number">10</span>,</span><br><span class="line">  name = <span class="string">&quot;zs&quot;</span>;</span><br></pre></td></tr></table></figure>

<p>变量在内存中的存储</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> age = <span class="number">18</span>;</span><br></pre></td></tr></table></figure>

<h2 id="3-变量的命名规则和规范"><a href="#3-变量的命名规则和规范" class="headerlink" title="(3) 变量的命名规则和规范"></a>(3) 变量的命名规则和规范</h2><p><strong>规则 - 必须遵守的，不遵守会报错</strong><br>1、由字母、数字、下划线、$符号组成，不能以数字开头<br>2、不能是关键字和保留字，例如：for、while。<br>3、区分大小写<br><strong>规范 - 建议遵守的，不遵守不会报错</strong><br>1、变量名必须有意义<br>2、遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。</p>
<h2 id="4-字面量"><a href="#4-字面量" class="headerlink" title="(4) 字面量"></a>(4) 字面量</h2><p>在源代码中一个固定值的表示法，也叫字面量。<br>数值字面量：8, 9, 10<br>字符串字面量：<code>&#39;程序员&#39;</code>, <code>&quot;大前端&quot;</code><br>布尔字面量：<code>true</code>，<code>false</code></p>
<h1 id="三-JavaScript-数据类型"><a href="#三-JavaScript-数据类型" class="headerlink" title="三. JavaScript 数据类型"></a>三. JavaScript 数据类型</h1><h2 id="1-基本数据类型"><a href="#1-基本数据类型" class="headerlink" title="(1) 基本数据类型"></a>(1) 基本数据类型</h2><p><code>Number</code>、<code>String</code>、<code>Boolean</code>、<code>Undefined</code>、<code>Null</code></p>
<h3 id="1-Number-类型"><a href="#1-Number-类型" class="headerlink" title="1. Number 类型"></a>1. Number 类型</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 十进制</span></span><br><span class="line"><span class="keyword">var</span> num = <span class="number">9</span>;</span><br><span class="line"><span class="comment">//进行算数计算时，八进制和十六进制表示的数值最终都被转换成十进制数值。</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 十六进制</span></span><br><span class="line"><span class="keyword">var</span> num = <span class="number">0xA</span>;<span class="comment">//数字序列范围：0~9 以及 A~F</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 八进制</span></span><br><span class="line"><span class="keyword">var</span> num1 = <span class="number">07</span>;  <span class="comment">// 对应十进制的 7</span></span><br><span class="line"><span class="keyword">var</span> num2 = <span class="number">011</span>; <span class="comment">// 对应十进制的 9</span></span><br><span class="line"><span class="keyword">var</span> num3 = <span class="number">021</span>; <span class="comment">// 对应十进制的 17 //数字序列范围：0~7</span></span><br><span class="line"><span class="comment">// 如果字面值中的数值超出了范围，那么前导零将被忽略，后面的数值将被当作十进制数值解析</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 浮点数</span></span><br><span class="line"><span class="keyword">var</span> n = <span class="number">5e-5</span>;   <span class="comment">// 科学计数法 5 乘以 10 的-5 次方  </span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数</span></span><br><span class="line"><span class="keyword">var</span> result = <span class="number">0.1</span> + <span class="number">0.2</span>; <span class="comment">// 结果不是 0.3，而是：0.30000000000000004</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">0.07</span> * <span class="number">100</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 注意：不要判断两个浮点数是否相等</span></span><br><span class="line"><span class="comment">// 就是说由于 0.1 转换成二进制时是无限循环的，所以在计算机中 0.1 只能存储成一个近似值</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 最小值：</span></span><br><span class="line"><span class="comment">// 这个值为： 5e-324</span></span><br><span class="line"><span class="built_in">Number</span>.MIN_VALUE</span><br><span class="line"></span><br><span class="line"><span class="comment">// 最大值：</span></span><br><span class="line"><span class="comment">// 这个值为： 1.7976931348623157e+308</span></span><br><span class="line"><span class="built_in">Number</span>.MAX_VALUE</span><br><span class="line"></span><br><span class="line">无穷大：<span class="literal">Infinity</span></span><br><span class="line">无穷小：-<span class="literal">Infinity</span></span><br></pre></td></tr></table></figure>

<h3 id="数值判断"><a href="#数值判断" class="headerlink" title="数值判断"></a>数值判断</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//可以通过 Number()方法判断</span></span><br><span class="line"><span class="literal">NaN</span>：not a number</span><br><span class="line"><span class="literal">NaN</span> 与任何值都不相等，包括他本身</span><br><span class="line"><span class="built_in">isNaN</span>(): is not a number</span><br><span class="line"><span class="comment">// 如果 x 是特殊的非数字值 NaN (或者能被转换为这样的值 )，返回的值就是 true。如果 x 是其他值,则返回 false</span></span><br></pre></td></tr></table></figure>

<h3 id="2、String-类型"><a href="#2、String-类型" class="headerlink" title="2、String 类型"></a>2、String 类型</h3><p>字符串可以使用单引号,也可以使用双引号，例如：<code>&#39;abc&#39;</code>、<code>&quot;abc&quot;</code><br>字符串字面量：<code>&#39;I am Happy&#39;</code>、<code>&quot;Hello World&quot;</code></p>
<h4 id="转义符"><a href="#转义符" class="headerlink" title="转义符"></a>转义符</h4><p><img src= "" data-lazy-src="https://codehhr.coding.net/p/codehhr/d/images/git/raw/master/js/striingtranslate.png" alt="striingtranslate"></p>
<h4 id="字符串长度"><a href="#字符串长度" class="headerlink" title="字符串长度"></a>字符串长度</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// length属性用来获取字符串的长度;</span></span><br><span class="line"><span class="keyword">var</span> str = <span class="string">&quot;Hello World&quot;</span>;</span><br><span class="line"><span class="built_in">console</span>.log(str.length);</span><br></pre></td></tr></table></figure>

<h4 id="字符串拼接"><a href="#字符串拼接" class="headerlink" title="字符串拼接"></a>字符串拼接</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 字符串拼接使用 + 连接;</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">11</span> + <span class="number">11</span>);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&quot;hello&quot;</span> + <span class="string">&quot; world&quot;</span>);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&quot;100&quot;</span> + <span class="string">&quot;100&quot;</span>);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&quot;11&quot;</span> + <span class="number">11</span>);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&quot;male:&quot;</span> + <span class="literal">true</span>);</span><br><span class="line"><span class="comment">// 两边只要有一个是字符串，那么+就是字符串拼接功能</span></span><br><span class="line"><span class="comment">// 两边如果都是数字，那么就是算术功能。</span></span><br></pre></td></tr></table></figure>

<p>语言具有隐式转换 ( 隐式类型转换就是指，数据的类型在不用人工干预的情况下进行转换的行为，原因：<code>js</code> 是一门弱类型（动态类型）的语言，他在声明变量的时候不需要指定类型，对变量赋值也没有类型的检测，所以 <code>js</code> 是非常的灵活的，)</p>
<h3 id="3-Boolean-类型"><a href="#3-Boolean-类型" class="headerlink" title="3. Boolean 类型"></a>3. Boolean 类型</h3><p><code>Boolean</code> 字面量： <code>true</code> 和 <code>false</code>，区分大小写<br>计算机内部存储：<code>true</code> 为 <code>1</code>，<code>false</code> 为 <code>0</code></p>
<h3 id="4-Undefined-和-Null"><a href="#4-Undefined-和-Null" class="headerlink" title="4. Undefined 和 Null"></a>4. Undefined 和 Null</h3><p><code>undefined</code> 表示一个声明了没有赋值的变量，变量只声明的时候值默认是 <code>undefined</code><br><code>null</code> 表示一个空，变量的值如果想为 <code>null</code>，必须手动设置</p>
<h2 id="2-复杂数据类型"><a href="#2-复杂数据类型" class="headerlink" title="(2) 复杂数据类型"></a>(2) 复杂数据类型</h2><p><code>Object</code></p>
<h2 id="3-数据类型转换"><a href="#3-数据类型转换" class="headerlink" title="(3) 数据类型转换"></a>(3) 数据类型转换</h2><h3 id="typeof-关键字"><a href="#typeof-关键字" class="headerlink" title="typeof 关键字"></a><code>typeof</code> 关键字</h3><p>获取变量的类型</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> age = <span class="number">18</span>;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> age); <span class="comment">// number</span></span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> <span class="literal">null</span>); <span class="comment">// Object</span></span><br></pre></td></tr></table></figure>

<p><strong>一个 bug，<code>null</code> 为什么是引用类型（复杂类型）？</strong></p>
<p>在 JS 的最初版本中使用的是 32 位系统，为了性能考虑使用低位存储变量的类型信息，000 开头的是对象，<code>null</code> 是全 0，所以将 <code>null</code> 误判为 <code>Object</code> 了，虽然现在的内部类型判断代码已经改变了，但 bug 永久的遗留下来了</p>
<h3 id="toString-NaN"><a href="#toString-NaN" class="headerlink" title="toString()"></a>toString()</h3><p>转换成字符串类型</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> num = <span class="number">5</span>;</span><br><span class="line"><span class="built_in">console</span>.log(num.toString()); <span class="comment">// String(&quot;5&quot;)</span></span><br></pre></td></tr></table></figure>

<h3 id="String"><a href="#String" class="headerlink" title="String()"></a>String()</h3><p><code>String()</code> 函数存在的意义：有些值没有 <code>toString()</code>, 这个时候可以使用 <code>String()</code>.比如：<code>undefined</code> 和 <code>null</code></p>
<h3 id="拼接字符串方式"><a href="#拼接字符串方式" class="headerlink" title="拼接字符串方式"></a>拼接字符串方式</h3><p><code>num + &quot;&quot;</code>，当 + 两边一个操作符是字符串类型，一个操作符是其它类型的时候，会先把其它类型转换成字符串再进行字符串拼接，返回字符串</p>
<h3 id="转换成数值类型"><a href="#转换成数值类型" class="headerlink" title="转换成数值类型"></a>转换成数值类型</h3><p><code>Number()</code> 可以把任意值转换成数值，如果要转换的字符串中有一个不是数值的字符，返回 <code>NaN</code><br>#### Number()转化规则<br>a. 如果字符串中只包含数字时，将其转换为十进制数值，忽略前导 0<br>b. 如果字符串中包含有效浮点格式，如“1.1”，将其转换为对应的浮点数字，忽略前导 0<br>c. 如果字符串中包含有效的十六进制格式，如“0xf”，将其转换为相同大小的十进制数值<br>d. 如果字符串为空，或者是空内容，将其转换为 0<br>e. 如果字符串中包含除上述格式之外的字符，则将其转换为 NaN</p>
<h4 id="parseInt"><a href="#parseInt" class="headerlink" title="parseInt()"></a>parseInt()</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 返回 12，如果第一个字符是数字会解析知道遇到第一个小数点结束</span></span><br><span class="line"><span class="keyword">var</span> num1 = <span class="built_in">parseInt</span>(<span class="string">&quot;12.3abc&quot;</span>);</span><br><span class="line"><span class="comment">// 返回 NaN，如果第一个字符不是数字或者符号就返回 NaN</span></span><br><span class="line"><span class="keyword">var</span> num2 = <span class="built_in">parseInt</span>(<span class="string">&quot;abc123&quot;</span>);</span><br></pre></td></tr></table></figure>

<h4 id="parseFloat"><a href="#parseFloat" class="headerlink" title="parseFloat()"></a>parseFloat()</h4><p><code>parseFloat()</code> 把字符串转换成浮点数，<code>parseFloat()</code> 和 <code>parseInt()</code> 非常相似，不同之处在与<br><code>parseFloat()</code> 会解析第一个<code>.</code> 遇到第二个 <code>.</code> 或者非数字结束<br>如果解析的内容里只有整数，解析成整数</p>
<h4 id="正负运算"><a href="#正负运算" class="headerlink" title="正负运算"></a>正负运算</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">&quot;500&quot;</span>;</span><br><span class="line"><span class="built_in">console</span>.log(+str); <span class="comment">// 取正</span></span><br><span class="line"><span class="built_in">console</span>.log(-str); <span class="comment">// 取负</span></span><br></pre></td></tr></table></figure>

<h3 id="转换成布尔类型"><a href="#转换成布尔类型" class="headerlink" title="转换成布尔类型"></a>转换成布尔类型</h3><p><strong><code>Boolean()</code></strong><br><code>0</code>, <code>&#39;&#39;</code>, <code>null</code>, <code>undefined</code>, <code>NaN</code>, 会转换成 <code>false</code>,其它都会转换成 <code>true</code></p>
<h1 id="四-JavaScript-运算"><a href="#四-JavaScript-运算" class="headerlink" title="四. JavaScript 运算"></a>四. JavaScript 运算</h1><h2 id="1-算术运算符"><a href="#1-算术运算符" class="headerlink" title="(1) 算术运算符"></a>(1) 算术运算符</h2><p><code>+ - * / %</code></p>
<h2 id="2-一元运算符"><a href="#2-一元运算符" class="headerlink" title="(2) 一元运算符"></a>(2) 一元运算符</h2><p>一元运算符：只有一个操作数的运算符<br><code>5 + 6</code> 两个操作数的运算符是二元运算符<br><code>++</code> 自身加 1, <code>--</code> 自身减 1</p>
<p><strong>前置 <code>++</code> 先将自身的值自增 1，再将自增后的值赋值给变量</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> num1 = <span class="number">5</span>;</span><br><span class="line">++num1;</span><br><span class="line"><span class="built_in">console</span>.log(num1); <span class="comment">// 6</span></span><br></pre></td></tr></table></figure>

<p><strong>后置 <code>++</code> 先将自身的值赋值给变量，然后再自增 1</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> num2 = <span class="number">5</span>;</span><br><span class="line"><span class="built_in">console</span>.log(num2++); <span class="comment">// 5</span></span><br><span class="line"><span class="built_in">console</span>.log(num2); <span class="comment">// 6</span></span><br></pre></td></tr></table></figure>

<p><strong>总结：</strong><br>前置 <code>++</code>： 先加后输出<br>后置 <code>++</code>： 先输出后加</p>
<h2 id="3-逻辑运算符-布尔运算符"><a href="#3-逻辑运算符-布尔运算符" class="headerlink" title="(3) 逻辑运算符 (布尔运算符)"></a>(3) 逻辑运算符 (布尔运算符)</h2><p><code>&amp;&amp;</code> (与) 两个操作数同时为 <code>true</code>，结果为 <code>true</code>，否则都是 <code>false</code><br><code>||</code> (或) 两个操作数有一个为 <code>true</code>，结果为 <code>true</code>，否则为 <code>false</code><br><code>!</code> (非) 取反</p>
<h2 id="4-关系运算符-比较运算符"><a href="#4-关系运算符-比较运算符" class="headerlink" title="(4) 关系运算符(比较运算符)"></a>(4) 关系运算符(比较运算符)</h2><p><code>&lt; &gt; &gt;= &lt;= == != === !==</code><br><code>==</code> 与 <code>===</code> 的区别：<code>==</code> 只进行值得比较，<code>===</code> 类型和值同时相等，则相等</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> result = <span class="string">&quot;55&quot;</span> == <span class="number">55</span>; <span class="comment">// true</span></span><br><span class="line"><span class="keyword">var</span> result = <span class="string">&quot;55&quot;</span> === <span class="number">55</span>; <span class="comment">// false 值相等，类型不相等</span></span><br><span class="line"><span class="keyword">var</span> result = <span class="number">55</span> === <span class="number">55</span>; <span class="comment">// true 值和类型都相等</span></span><br></pre></td></tr></table></figure>

<h2 id="5-赋值运算符"><a href="#5-赋值运算符" class="headerlink" title="(5) 赋值运算符"></a>(5) 赋值运算符</h2><p><code>= += -= *= /= %=</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">num += <span class="number">5</span>; <span class="comment">//相当于 num = num + 5;</span></span><br><span class="line">num *= <span class="number">5</span>; <span class="comment">//相当于 num = num * 5;</span></span><br></pre></td></tr></table></figure>

<h2 id="6-运算符的优先级"><a href="#6-运算符的优先级" class="headerlink" title="(6) 运算符的优先级"></a>(6) 运算符的优先级</h2><p><strong>优先级从高到底如下：</strong></p>
<p>括号&gt;点运算符&gt;一元运算符&gt; 算数运算符 &gt;关系运算符&gt;逻辑运算符 &gt;赋值运算符</p>
<p><strong>注意：同级运算符先后顺序如下：</strong><br>一元运算符 <code>++</code> <code>--</code> <code>!</code><br>算数运算符 先 <code>*</code> <code>/</code> <code>%</code> 后 <code>+</code> <code>-</code><br>关系运算符 <code>&gt;</code> <code>&gt;=</code> <code>&lt;</code> <code>&lt;=</code> <code>==</code> <code>!=</code> <code>===</code> <code>!==</code><br>逻辑运算符 先 <code>&amp;&amp;</code> 后 <code>||</code></p>
<h2 id="运算优先级练习"><a href="#运算优先级练习" class="headerlink" title="运算优先级练习"></a>运算优先级练习</h2><p><strong>优先级： 括号&gt;点运算符&gt;一元运算符&gt; 算数运算符 &gt;关系运算符&gt;逻辑运算符 &gt;赋值运算符</strong><br>(1)</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">4</span> &gt;= <span class="number">6</span> || (<span class="string">&quot;人&quot;</span> != <span class="string">&quot;阿凡达&quot;</span> &amp;&amp; !(<span class="number">12</span> * <span class="number">2</span> == <span class="number">144</span>) &amp;&amp; <span class="literal">true</span>);</span><br><span class="line"><span class="comment">// 第一轮 4 &gt;= 6 || (&quot;人&quot; != &quot;阿凡达&quot; &amp;&amp; !(false) &amp;&amp; true)</span></span><br><span class="line"><span class="comment">// 第二轮 4 &gt;= 6 || (&quot;人&quot; != &quot;阿凡达&quot; &amp;&amp; true &amp;&amp; true)</span></span><br><span class="line"><span class="comment">// 第三轮 false || (true &amp;&amp; true &amp;&amp; true)</span></span><br><span class="line"><span class="comment">// 第四轮 false || true</span></span><br><span class="line"><span class="comment">// 结果为 true</span></span><br></pre></td></tr></table></figure>

<p>(2)</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">100.2</span> &gt;= <span class="number">52</span> || (<span class="string">&quot;蛇&quot;</span> != <span class="string">&quot;眼镜蛇&quot;</span> &amp;&amp; !(<span class="number">25</span> * <span class="number">4</span> == <span class="number">120</span>)) || <span class="literal">true</span>;</span><br><span class="line"><span class="comment">// 结果为 true</span></span><br><span class="line"><span class="comment">// 第一轮 : 100.2 &gt;= 52 || (&quot;蛇&quot; != &quot;眼镜蛇&quot; &amp;&amp; !false) || true</span></span><br><span class="line"><span class="comment">// 第二轮 : 100.2 &gt;= 52 || (&quot;蛇&quot; != &quot;眼镜蛇&quot; &amp;&amp; true) || true</span></span><br><span class="line"><span class="comment">// 第三轮 : true || (true &amp;&amp; true) || true</span></span><br><span class="line"><span class="comment">// 第四轮 : true</span></span><br></pre></td></tr></table></figure>

<h1 id="五-流程控制"><a href="#五-流程控制" class="headerlink" title="五. 流程控制"></a>五. 流程控制</h1><p>程序的三种基本结构<br>顺序结构：从上到下执行的代码就是顺序结构(程序默认就是由上到下顺序执行的)<br>分支结构：根据不同的情况，执行对应代码<br>循环结构：重复做一件事情</p>
<h2 id="1-分支结构"><a href="#1-分支结构" class="headerlink" title="1. 分支结构"></a>1. 分支结构</h2><h3 id="1-if-语句"><a href="#1-if-语句" class="headerlink" title="(1) if 语句"></a>(1) if 语句</h3><p><code>if</code> 语句  - 只有当指定条件为 true 时，使用该语句来执行代码<br><code>if...else</code> 语句  - 当条件为 true 时执行代码，当条件为 false 时执行其他代码<br><code>if...else if....else</code> 语句- 使用该语句来选择多个代码块之一来执行</p>
<p><strong>if 案例判断一个人的年龄是否满 18 岁(是否成年)</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span> <span class="comment">// 判断</span></span><br><span class="line"><span class="keyword">if</span> <span class="comment">// (条件) &#123;执行语句&#125;</span></span><br><span class="line"><span class="keyword">var</span> age = <span class="number">19</span>;</span><br><span class="line"><span class="keyword">if</span> (age &gt;= <span class="number">18</span>) &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&quot;成年了&quot;</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span> (age &lt; <span class="number">18</span>) &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&quot;未成年&quot;</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 弹出输入框</span></span><br><span class="line">prompt(<span class="string">&quot;参数会展示在页面上&quot;</span>) <span class="comment">// 点击确认会返回输入内容，点击取消会返回 null</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> a = prompt();</span><br><span class="line"><span class="built_in">console</span>.log(a);</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> age = prompt();</span><br><span class="line"><span class="keyword">if</span> (age &gt;= <span class="number">18</span>) &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&quot;成年了&quot;</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">if</span> (age &lt; <span class="number">18</span>) &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&quot;未成年&quot;</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><strong>if 案例百分制转换成等级制</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> grade = prompt(<span class="string">&quot;请输入成绩&quot;</span>);</span><br><span class="line"><span class="keyword">if</span> (grade &gt; <span class="number">0</span> &amp;&amp; grade &lt; <span class="number">60</span>) &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&quot;不及格&quot;</span>);</span><br><span class="line">&#125; <span class="keyword">else</span> <span class="keyword">if</span> (grade &lt; <span class="number">70</span>) &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&quot;及格&quot;</span>);</span><br><span class="line">&#125; <span class="keyword">else</span> <span class="keyword">if</span> (grade &lt; <span class="number">80</span>) &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&quot;良&quot;</span>);</span><br><span class="line">&#125; <span class="keyword">else</span> <span class="keyword">if</span> (grade &lt; <span class="number">90</span>) &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&quot;良好&quot;</span>);</span><br><span class="line">&#125; <span class="keyword">else</span> <span class="keyword">if</span> (grade &lt;= <span class="number">100</span>) &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&quot;优秀&quot;</span>);</span><br><span class="line">&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&quot;请输入0-100&quot;</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="2-三元运算符"><a href="#2-三元运算符" class="headerlink" title="(2) 三元运算符"></a>(2) 三元运算符</h3><p><code>表达式 1</code> ? <code>表达式 2</code> : <code>表达式 3</code><br>是对 <code>if ... else</code> 语句的一种简化写法</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">age &gt;= <span class="number">18</span> ? <span class="built_in">console</span>.log(<span class="string">&quot;成年&quot;</span>) : <span class="built_in">console</span>.log(<span class="string">&quot;未成年&quot;</span>);</span><br></pre></td></tr></table></figure>

<h3 id="3-switch-语句"><a href="#3-switch-语句" class="headerlink" title="(3) switch 语句"></a>(3) switch 语句</h3><p><code>switch</code> 语句<br><code>break</code> 可以省略，如果省略，代码会继续执行下一个 <code>case</code><br><code>default</code> 关键词来规定匹配不存在时做的事情。<br><code>switch case</code> 使用严格比较（===），值必须与要匹配的类型相同</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> day = prompt(<span class="string">&quot;请输入数字&quot;</span>);</span><br><span class="line"><span class="comment">// prompt 返回类型为字符串</span></span><br><span class="line"><span class="keyword">switch</span> (<span class="built_in">Number</span>(day)) &#123;</span><br><span class="line">  <span class="keyword">case</span> <span class="number">1</span>:</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&quot;周一&quot;</span>);</span><br><span class="line">    <span class="keyword">break</span>;</span><br><span class="line">  <span class="keyword">case</span> <span class="number">2</span>:</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&quot;周二&quot;</span>);</span><br><span class="line">    <span class="keyword">break</span>;</span><br><span class="line">  <span class="keyword">case</span> <span class="number">3</span>:</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&quot;周三&quot;</span>);</span><br><span class="line">    <span class="keyword">break</span>;</span><br><span class="line">  <span class="keyword">case</span> <span class="number">4</span>:</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&quot;周四&quot;</span>);</span><br><span class="line">    <span class="keyword">break</span>;</span><br><span class="line">  <span class="keyword">case</span> <span class="number">5</span>:</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&quot;周五&quot;</span>);</span><br><span class="line">    <span class="keyword">break</span>;</span><br><span class="line">  <span class="keyword">case</span> <span class="number">6</span>:</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&quot;周六&quot;</span>);</span><br><span class="line">    <span class="keyword">break</span>;</span><br><span class="line">  <span class="keyword">case</span> <span class="number">7</span>:</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&quot;周日&quot;</span>);</span><br><span class="line">    <span class="keyword">break</span>;</span><br><span class="line">  <span class="keyword">default</span>:</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&quot;666&quot;</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><strong>百分制转换成等级制</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> grade = prompt();</span><br><span class="line"><span class="keyword">var</span> g = <span class="built_in">parseInt</span>(grade / <span class="number">10</span>);</span><br><span class="line"><span class="built_in">console</span>.log(g);</span><br><span class="line"><span class="keyword">switch</span> (g) &#123;</span><br><span class="line">  <span class="keyword">case</span> <span class="number">10</span>:</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&quot;NB&quot;</span>);</span><br><span class="line">    <span class="keyword">break</span>;</span><br><span class="line">  <span class="keyword">case</span> <span class="number">9</span>:</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&quot;优秀&quot;</span>);</span><br><span class="line">    <span class="keyword">break</span>;</span><br><span class="line">  <span class="keyword">case</span> <span class="number">8</span>:</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&quot;良好&quot;</span>);</span><br><span class="line">    <span class="keyword">break</span>;</span><br><span class="line">  <span class="keyword">case</span> <span class="number">7</span>:</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&quot;良&quot;</span>);</span><br><span class="line">    <span class="keyword">break</span>;</span><br><span class="line">  <span class="keyword">case</span> <span class="number">6</span>:</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&quot;及格&quot;</span>);</span><br><span class="line">    <span class="keyword">break</span>;</span><br><span class="line">  <span class="keyword">default</span>:</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&quot;不及格&quot;</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>能用 <code>switch</code> 语句实现的就一定可以使用 <code>if</code> 实现，但是反之不一定，如果是区间范围就采用 <code>if</code> .如果是等值判断使用 <code>switch</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// If 语句会把后面的值隐式转换成布尔类型</span></span><br><span class="line"><span class="comment">// 转换为 true ： 非空字符串 非 0 数字 true 任何对象</span></span><br><span class="line"><span class="comment">// 转换成 false ： 空字符串, 0, false, null, undefined</span></span><br><span class="line"><span class="keyword">if</span> (<span class="literal">undefined</span>) &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&quot;OK&quot;</span>);</span><br><span class="line">&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&quot;NO&quot;</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="2-循环结构"><a href="#2-循环结构" class="headerlink" title="2. 循环结构"></a>2. 循环结构</h2><p>在 <code>javascript</code> 中，循环语句有三种，<code>while</code>、<code>do..while</code>、<code>for</code> 循环。</p>
<h3 id="1-while-语句"><a href="#1-while-语句" class="headerlink" title="(1) while 语句"></a>(1) while 语句</h3><p>while 循环会在指定条件为真时循环执行代码块</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//   死循环</span></span><br><span class="line"><span class="comment">// while (true) &#123;</span></span><br><span class="line"><span class="comment">//   console.log();</span></span><br><span class="line"><span class="comment">// &#125;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 打印 1-100</span></span><br><span class="line"><span class="keyword">var</span> a = <span class="number">1</span>;</span><br><span class="line"><span class="keyword">while</span> (a &lt;= <span class="number">100</span>) &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(a);</span><br><span class="line">  a++;</span><br><span class="line">  <span class="built_in">console</span>.log(a++);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 打印 1-100 的和</span></span><br><span class="line"><span class="keyword">var</span> sum = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">var</span> b = <span class="number">1</span>;</span><br><span class="line"><span class="keyword">while</span> (b &lt;= <span class="number">100</span>) &#123;</span><br><span class="line">  sum += b;</span><br><span class="line">  b++;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 打印 100 以内 7 的倍数</span></span><br><span class="line"><span class="keyword">var</span> c = <span class="number">1</span>;</span><br><span class="line"><span class="keyword">while</span> (c &lt;= <span class="number">100</span>) &#123;</span><br><span class="line">  <span class="keyword">if</span> (c % <span class="number">7</span> == <span class="number">0</span>) &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(c);</span><br><span class="line">  &#125;</span><br><span class="line">  c++;</span><br><span class="line">  <span class="comment">// ++c;</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 100 以内偶数及和</span></span><br><span class="line"><span class="keyword">var</span> d = <span class="number">1</span>;</span><br><span class="line"><span class="keyword">var</span> sum2 = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">while</span> (d &lt;= <span class="number">100</span>) &#123;</span><br><span class="line">  <span class="keyword">if</span> (d % <span class="number">2</span> == <span class="number">0</span>) &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(d + <span class="string">&quot;是偶数&quot;</span>);</span><br><span class="line">    sum2 += d;</span><br><span class="line">  &#125;</span><br><span class="line">  d++;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(sum2);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 100 以内奇数及和</span></span><br><span class="line"><span class="keyword">var</span> e = <span class="number">1</span>;</span><br><span class="line"><span class="keyword">var</span> sum3 = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">while</span> (e &lt;= <span class="number">100</span>) &#123;</span><br><span class="line">  <span class="keyword">if</span> (e % <span class="number">2</span> != <span class="number">0</span>) &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(e + <span class="string">&quot;是奇数&quot;</span>);</span><br><span class="line">    sum3 += e;</span><br><span class="line">  &#125;</span><br><span class="line">  e++;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(sum3);</span><br></pre></td></tr></table></figure>

<h3 id="2-do…while-语句"><a href="#2-do…while-语句" class="headerlink" title="(2) do…while 语句"></a>(2) do…while 语句</h3><p><code>do..while</code> 循环和 <code>while</code> 循环非常像，二者经常可以相互替代，但是 <code>do..while</code> 的特点是不管条件成不成立，都会执行一次。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// do ... while</span></span><br><span class="line"><span class="comment">// 打印 1-100 之间所有数的和</span></span><br><span class="line"><span class="keyword">var</span> f = <span class="number">1</span>;</span><br><span class="line"><span class="keyword">var</span> sum4 = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">do</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(f);</span><br><span class="line">  sum4 += f;</span><br><span class="line">  f++;</span><br><span class="line">&#125; <span class="keyword">while</span> (f &lt;= <span class="number">100</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 打印 100 以内 7的倍数</span></span><br><span class="line"><span class="keyword">var</span> g = <span class="number">1</span>;</span><br><span class="line"><span class="keyword">do</span> &#123;</span><br><span class="line">  <span class="keyword">if</span> (g % <span class="number">7</span> == <span class="number">0</span>) &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(g);</span><br><span class="line">  &#125;</span><br><span class="line">  g++;</span><br><span class="line">&#125; <span class="keyword">while</span> (g &lt;= <span class="number">100</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 打印 100 以内所有偶数</span></span><br><span class="line"><span class="keyword">var</span> i = <span class="number">1</span>;</span><br><span class="line"><span class="keyword">var</span> sum = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">do</span> &#123;</span><br><span class="line">  <span class="keyword">if</span> (i % <span class="number">2</span> == <span class="number">0</span>) &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(i + <span class="string">&quot;是偶数&quot;</span>);</span><br><span class="line">    sum += i;</span><br><span class="line">  &#125;</span><br><span class="line">  i++;</span><br><span class="line">&#125; <span class="keyword">while</span> (i &lt;= <span class="number">100</span>);</span><br><span class="line"><span class="built_in">console</span>.log(sum);</span><br></pre></td></tr></table></figure>

<h3 id="3-for-语句"><a href="#3-for-语句" class="headerlink" title="(3) for 语句"></a>(3) for 语句</h3><p><code>while</code> 和 <code>do...while</code> 一般用来解决无法确认次数的循环。<code>for</code> 循环一般在循环次数确定的时候比较方便</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// for 循环</span></span><br><span class="line"><span class="comment">// 1-100 和</span></span><br><span class="line"><span class="keyword">var</span> sum = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> j = <span class="number">1</span>; j &lt; <span class="number">101</span>; j++) &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(j);</span><br><span class="line">  sum += j;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(sum);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 1-100 偶数和</span></span><br><span class="line"><span class="keyword">var</span> sum = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">1</span>; i &lt;= <span class="number">100</span>; i++) &#123;</span><br><span class="line">  <span class="keyword">if</span> (i % <span class="number">2</span> == <span class="number">0</span>) &#123;</span><br><span class="line">    sum += i;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(sum);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 双层 for 循环</span></span><br><span class="line"><span class="comment">// 正方形</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; <span class="number">10</span>; i++) &#123;</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">var</span> j = <span class="number">0</span>; j &lt; <span class="number">10</span>; j++) &#123;</span><br><span class="line">    <span class="built_in">document</span>.write(<span class="string">&quot;*&quot;</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="built_in">document</span>.write(<span class="string">&quot;&lt;br /&gt;&quot;</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 三角形</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; <span class="number">10</span>; i++) &#123;</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">var</span> j = <span class="number">0</span>; j &lt; i; j++) &#123;</span><br><span class="line">    <span class="built_in">document</span>.write(<span class="string">&quot;#&quot;</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="built_in">document</span>.write(<span class="string">&quot;&lt;br /&gt;&quot;</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="4-continue-和-break"><a href="#4-continue-和-break" class="headerlink" title="(4) continue 和 break"></a>(4) continue 和 break</h3><p><code>break</code> :立即跳出整个循环，即循环结束，开始执行循环后面的内容（直接跳到大括号）<br><code>continue</code> :立即跳出当前循环，继续下一次循环（跳到 <code>i++</code> 的地方）</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// break</span></span><br><span class="line"><span class="comment">// continue</span></span><br><span class="line"><span class="keyword">var</span> sum = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">1</span>; i &lt;= <span class="number">100</span>; i++) &#123;</span><br><span class="line">  <span class="keyword">if</span> (i % <span class="number">10</span> == <span class="number">3</span>) &#123;</span><br><span class="line">    <span class="keyword">break</span>;</span><br><span class="line">    <span class="comment">// continue;</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">sum += i;</span><br><span class="line"><span class="built_in">console</span>.log(sum);</span><br></pre></td></tr></table></figure>

<h3 id="5-循环语句区别"><a href="#5-循环语句区别" class="headerlink" title="(5) 循环语句区别"></a>(5) 循环语句区别</h3><h4 id="1-循环结构的表达式不同"><a href="#1-循环结构的表达式不同" class="headerlink" title="1. 循环结构的表达式不同"></a>1. 循环结构的表达式不同</h4><p><code>do-while</code> 循环结构表达式为：<code>do</code>{循环体;}<br><code>for</code> 循环的结构表达式为：<code>for</code>（单次表达式;条件表达式;末尾循环体）{中间循环体；}。<br><code>while</code> 循环的结构表达式为：<code>while</code>（表达式）{循环体}</p>
<h4 id="2-执行时判断方式不同"><a href="#2-执行时判断方式不同" class="headerlink" title="2. 执行时判断方式不同"></a>2. 执行时判断方式不同</h4><p><code>do-while</code> 循环将先运行一次，因为经过第一次 <code>do</code> 循环后，当检查条件表达式的值时，其值为   不成立时而会退出循环。保证了至少执行 <code>do</code>{ }内的语句一次。<br><code>for</code> 循环执行的中间循环体可以为一个语句，也可以为多个语句，当中间循环体只有一个语句时，其大括号{}可以省略，执行完中间循环体后接着执行末尾循环体。<br><code>while</code> 循环执行时当满足条件时进入循环，进入循环后，当条件不满足时，执行完循环体内全部语句后再跳出（而不是立即跳出循环）。</p>
<h4 id="3-执行次数不同"><a href="#3-执行次数不同" class="headerlink" title="3. 执行次数不同"></a>3. 执行次数不同</h4><p><code>do-while</code> 循环是先执行后判断，执行次数至少为一次。<br><code>for</code> 循环是先判断后执行，可以不执行中间循环体。<br><code>while</code> 循环先判断后执行，可以不执行中间循环体。</p>
<h4 id="4-执行末尾循环体的顺序不同"><a href="#4-执行末尾循环体的顺序不同" class="headerlink" title="4. 执行末尾循环体的顺序不同"></a>4. 执行末尾循环体的顺序不同</h4><p><code>do-while</code> 循环是在中间循环体中加入末尾循环体，并在执行中间循环体时执行末尾循环体。<br><code>for</code> 循环的中间循环体在条件判断语句里，执行末尾循环体后自动执行中间循环体。<br><code>while</code> 循环的末尾循环体也是在中间循环体里，并在中间循环体中执行。</p>
<h2 id="作业"><a href="#作业" class="headerlink" title="作业"></a>作业</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 作业 1</span></span><br><span class="line"><span class="comment">// 求 1-100 所有数的乘积</span></span><br><span class="line"><span class="keyword">var</span> sum1 = <span class="number">1</span>;</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> a = <span class="number">1</span>; a &lt;= <span class="number">100</span>; a++) &#123;</span><br><span class="line">  sum1 *= a;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(sum1);</span><br><span class="line"><span class="comment">// ---------------------------------------------</span></span><br><span class="line"><span class="comment">// 作业 2</span></span><br><span class="line"><span class="comment">// 求 1-100 之间所有奇数的和</span></span><br><span class="line"><span class="keyword">var</span> sum2 = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> b = <span class="number">1</span>; b &lt;= <span class="number">100</span>; b++) &#123;</span><br><span class="line">  <span class="keyword">if</span> (b % <span class="number">2</span> == <span class="number">1</span>) &#123;</span><br><span class="line">    sum2 += b;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(sum2);</span><br><span class="line"></span><br><span class="line"><span class="comment">// ---------------------------------------------</span></span><br><span class="line"><span class="comment">// 作业 3</span></span><br><span class="line"><span class="comment">// 计算 1-100 之间能被 3 整除的数的和</span></span><br><span class="line"><span class="keyword">var</span> sum3 = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> c = <span class="number">1</span>; c &lt;= <span class="number">100</span>; c++) &#123;</span><br><span class="line">  <span class="keyword">if</span> (c % <span class="number">3</span> == <span class="number">0</span>) &#123;</span><br><span class="line">    sum3 += c;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(sum3);</span><br><span class="line"></span><br><span class="line"><span class="comment">// ---------------------------------------------</span></span><br><span class="line"><span class="comment">// 作业 4</span></span><br><span class="line"><span class="comment">// 计算 1-100 之间不能被7整除的数的和</span></span><br><span class="line"><span class="keyword">var</span> sum4 = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> d = <span class="number">1</span>; d &lt;= <span class="number">100</span>; d++) &#123;</span><br><span class="line">  <span class="keyword">if</span> (d % <span class="number">7</span> == <span class="number">0</span>) &#123;</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    sum4 += d;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(sum4);</span><br><span class="line"></span><br><span class="line"><span class="comment">// ---------------------------------------------</span></span><br><span class="line"><span class="comment">// 作业 5</span></span><br><span class="line"><span class="comment">// 本金10000元存入银行，年利率是千分之三，每过1年，将本金和利息相加作为新的本金。计算5年后，获得的本金是多少？</span></span><br><span class="line"><span class="keyword">var</span> money = <span class="number">10000</span>,</span><br><span class="line">  rate = <span class="number">0.003</span>,</span><br><span class="line">  years = <span class="number">5</span>,</span><br><span class="line">  sum5 = <span class="number">0</span>;</span><br><span class="line">sum5 += money;</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> year = <span class="number">1</span>; year &lt;= years; year++) &#123;</span><br><span class="line">  sum5 *= <span class="number">1</span> + rate;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(sum5);</span><br><span class="line"></span><br><span class="line"><span class="comment">// ---------------------------------------------</span></span><br><span class="line"><span class="comment">// 作业 6</span></span><br><span class="line"><span class="comment">// 有个人想知道，一年之内一对兔子能繁殖多少对？</span></span><br><span class="line"><span class="comment">// 于是就筑了一道围墙把一对兔子关在里面。已知一对兔子每个月可以生一对小兔子，而一对兔子从出生后第3个月起每月生一对小兔子。假如一年内没有发生死亡现象，那么，一对兔子一年内（12个月）能繁殖成多少对？</span></span><br><span class="line"><span class="comment">// (兔子的规律为数列，1，1，2，3，5，8，13，21)</span></span><br><span class="line"><span class="keyword">var</span> sum6,</span><br><span class="line">  r1 = <span class="number">1</span>,</span><br><span class="line">  r2 = <span class="number">1</span>;</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> month = <span class="number">1</span>; month &lt;= <span class="number">12</span>; month++) &#123;</span><br><span class="line">  sum6 = r1 + r2;</span><br><span class="line">  r1 = r2;</span><br><span class="line">  r2 = sum6;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&quot;第&quot;</span> + month + <span class="string">&quot;个月 : &quot;</span> + sum6 + <span class="string">&quot; 只&quot;</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// ---------------------------------------------</span></span><br><span class="line"><span class="comment">// 作业 7</span></span><br><span class="line"><span class="comment">// 求 1-100 之间不能被 7 整除的整数的和（用continue）</span></span><br><span class="line"><span class="keyword">var</span> sum7 = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> e = <span class="number">1</span>; e &lt;= <span class="number">100</span>; e++) &#123;</span><br><span class="line">  <span class="keyword">if</span> (e % <span class="number">7</span> == <span class="number">0</span>) &#123;</span><br><span class="line">    <span class="keyword">continue</span>;</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    sum7 += e;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(sum7);</span><br><span class="line"></span><br><span class="line"><span class="comment">// ---------------------------------------------</span></span><br><span class="line"><span class="comment">// 作业 8</span></span><br><span class="line"><span class="comment">// 求 200-300 之间所有的奇数的和（用continue）</span></span><br><span class="line"><span class="keyword">var</span> sum8 = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">200</span>; i &lt;= <span class="number">300</span>; i++) &#123;</span><br><span class="line">  <span class="keyword">if</span> (i % <span class="number">2</span> == <span class="number">0</span>) &#123;</span><br><span class="line">    <span class="keyword">continue</span>;</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    sum8 += i;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(sum8);</span><br><span class="line"><span class="comment">// ---------------------------------------------</span></span><br><span class="line"><span class="comment">// 作业 9</span></span><br><span class="line"><span class="comment">// 求 200-300之间第一个能被7整数的数（break）</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> j = <span class="number">200</span>; j &lt;= <span class="number">300</span>; j++) &#123;</span><br><span class="line">  <span class="keyword">if</span> (j % <span class="number">7</span> == <span class="number">0</span>) &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(j);</span><br><span class="line">    <span class="keyword">break</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="2-调试"><a href="#2-调试" class="headerlink" title="2. 调试"></a>2. 调试</h2><h3 id="1-alert"><a href="#1-alert" class="headerlink" title="(1) alert()"></a>(1) alert()</h3><h3 id="2-console-log"><a href="#2-console-log" class="headerlink" title="(2) console.log()"></a>(2) console.log()</h3><h3 id="3-debugger-关键字"><a href="#3-debugger-关键字" class="headerlink" title="(3) debugger 关键字"></a>(3) debugger 关键字</h3><p>debugger  关键字用于停止执行 JavaScript，并调用调试函数。这个关键字与在调试工具中设置断点的效果是一样的</p>
<h3 id="4-断点调试"><a href="#4-断点调试" class="headerlink" title="(4) 断点调试"></a>(4) 断点调试</h3><h1 id="六-数组"><a href="#六-数组" class="headerlink" title="六. 数组"></a>六. 数组</h1><h2 id="1-为什么要学习数组"><a href="#1-为什么要学习数组" class="headerlink" title="(1) 为什么要学习数组"></a>(1) 为什么要学习数组</h2><p>之前学习的数据类型，只能存储一个值,比如：<code>Number</code>,<code>String</code></p>
<h2 id="2-数组的定义"><a href="#2-数组的定义" class="headerlink" title="(2) 数组的定义"></a>(2) 数组的定义</h2><p>所谓数组，就是将多个元素（通常是同一类型）按一定顺序排列放到一个集合中，那么这个集合我们就称之为数组。<br>数组是一个有序的列表，可以在数组中存放任意的数据，并且数组的长度可以动态的调整</p>
<h2 id="3-通过数组字面量创建数组"><a href="#3-通过数组字面量创建数组" class="headerlink" title="(3) 通过数组字面量创建数组"></a>(3) 通过数组字面量创建数组</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 创建一个空数组</span></span><br><span class="line"><span class="keyword">var</span> arr1 = [];</span><br><span class="line"><span class="comment">// 创建一个包含3个数值的数组，多个数组项以逗号隔开</span></span><br><span class="line"><span class="keyword">var</span> arr2 = [<span class="number">1</span>, <span class="number">3</span>, <span class="number">4</span>];</span><br><span class="line"><span class="comment">// 创建一个包含2个字符串的数组</span></span><br><span class="line"><span class="keyword">var</span> arr3 = [<span class="string">&quot;a&quot;</span>, <span class="string">&quot;c&quot;</span>];</span><br><span class="line"><span class="comment">// 可以通过数组的length属性获取数组的长度</span></span><br><span class="line"><span class="built_in">console</span>.log(arr3.length);</span><br><span class="line"><span class="comment">// 可以设置length属性改变数组中元素的个数</span></span><br><span class="line">arr3.length = <span class="number">0</span>;</span><br></pre></td></tr></table></figure>

<h2 id="4-获取数组元素"><a href="#4-获取数组元素" class="headerlink" title="(4) 获取数组元素"></a>(4) 获取数组元素</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 获取数组元素</span></span><br><span class="line"><span class="comment">// 按下标取值,从0开始</span></span><br><span class="line"><span class="comment">// 取值未定义的下标，值为 undefined</span></span><br><span class="line"><span class="built_in">console</span>.log(arr2[<span class="number">0</span>]);</span><br><span class="line"><span class="built_in">console</span>.log(arr2[<span class="number">10</span>]); <span class="comment">// undefined</span></span><br></pre></td></tr></table></figure>

<h2 id="5-遍历数组"><a href="#5-遍历数组" class="headerlink" title="(5) 遍历数组"></a>(5) 遍历数组</h2><p>遍历：遍及所有，对数组的每一个元素都访问一次就叫遍历。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; arr.length; i++) &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(arr[i]);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="6-数组中新增元素"><a href="#6-数组中新增元素" class="headerlink" title="(6) 数组中新增元素"></a>(6) 数组中新增元素</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 数组中新增元素</span></span><br><span class="line"><span class="comment">// 赋值</span></span><br><span class="line">arr2[arr2.length] = <span class="number">100</span>;</span><br><span class="line"><span class="built_in">console</span>.log(arr2);</span><br><span class="line"></span><br><span class="line"><span class="comment">// push()</span></span><br><span class="line"><span class="comment">// 在数组末尾添加，返回数组长度</span></span><br><span class="line">arr2.push(<span class="number">101</span>);</span><br><span class="line"><span class="built_in">console</span>.log(arr2);</span><br><span class="line"></span><br><span class="line"><span class="comment">// unshift()</span></span><br><span class="line"><span class="comment">// 在数组开始添加任意元素,返回数组长度</span></span><br><span class="line">arr2.unshift(<span class="number">0</span>);</span><br><span class="line"><span class="built_in">console</span>.log(arr2);</span><br><span class="line"></span><br><span class="line"><span class="comment">// shift()</span></span><br><span class="line"><span class="comment">// 从数组中删除第一个元元素，并返回该元素的值.此方法会更改数组的长度</span></span><br><span class="line"><span class="keyword">var</span> r = arr2.shift();</span><br><span class="line"><span class="built_in">console</span>.log(r);</span><br><span class="line"><span class="built_in">console</span>.log(arr2);</span><br></pre></td></tr></table></figure>

<h2 id="数组练习案例"><a href="#数组练习案例" class="headerlink" title="数组练习案例"></a>数组练习案例</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 求数组所有数平均值</span></span><br><span class="line"><span class="keyword">var</span> sum = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">var</span> arr1 = [<span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>];</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; arr1.length; i++) &#123;</span><br><span class="line">  sum += arr1[i];</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(sum);</span><br><span class="line"><span class="built_in">console</span>.log(sum / arr1.length);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 数组最大值，最小值 (第一种)</span></span><br><span class="line"><span class="keyword">var</span> arr2 = [<span class="number">0</span>, <span class="number">1</span>, , <span class="number">32</span>, <span class="number">0</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>, <span class="number">6</span>];</span><br><span class="line"><span class="keyword">var</span> min = arr2[<span class="number">0</span>], <span class="comment">// 假设第一个元素是最小值</span></span><br><span class="line">  max = arr2[<span class="number">0</span>]; <span class="comment">// 假设第一个元素是最大值</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; arr2.length; i++) &#123;</span><br><span class="line">  <span class="keyword">if</span> (arr2[i] &gt; max) &#123;</span><br><span class="line">    max = arr2[i];</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">if</span> (arr2[i] &lt; min) &#123;</span><br><span class="line">    min = arr2[i];</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(max);</span><br><span class="line"><span class="built_in">console</span>.log(min);</span><br><span class="line"><span class="comment">// 数组最大值，最小值 (第二种)</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; arr2.length; i++) &#123;</span><br><span class="line">  <span class="keyword">if</span> (arr2[i] &gt; arr2[i + <span class="number">1</span>]) &#123;</span><br><span class="line">    <span class="keyword">var</span> temp = arr2[i + <span class="number">1</span>];</span><br><span class="line">    arr2[i + <span class="number">1</span>] = arr2[i];</span><br><span class="line">    arr2[i] = temp;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">max = arr2[arr2.length - <span class="number">1</span>];</span><br><span class="line"><span class="built_in">console</span>.log(max);</span><br><span class="line"></span><br><span class="line"><span class="comment">// indexOf()</span></span><br><span class="line"><span class="comment">// 返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回 -1</span></span><br><span class="line"><span class="comment">// 数组去重</span></span><br><span class="line"><span class="comment">// 第一种</span></span><br><span class="line"><span class="keyword">var</span> arr3 = [<span class="number">1</span>, <span class="number">1</span>, <span class="number">22</span>, <span class="number">22</span>, <span class="number">55</span>, <span class="number">55</span>, <span class="number">9</span>, <span class="number">9</span>];</span><br><span class="line"><span class="keyword">var</span> newArr = [];</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; arr3.length; i++) &#123;</span><br><span class="line">  <span class="keyword">if</span> (arr3.indexOf(arr3[i]) == i) &#123;</span><br><span class="line">    newArr.push(arr3[i]);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(newArr);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 第二种</span></span><br><span class="line"><span class="comment">// 遍历新数组,indexOf 返回判断 -1, 即不存在就 push()</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; arr3.length; i++) &#123;</span><br><span class="line">  <span class="keyword">if</span> (newArr.indexOf(arr3[i]) == -<span class="number">1</span>) &#123;</span><br><span class="line">    newArr.push(arr3[i]);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(newArr);</span><br></pre></td></tr></table></figure>

<h1 id="七-函数"><a href="#七-函数" class="headerlink" title="七. 函数"></a>七. 函数</h1><h2 id="1-为什么要有函数"><a href="#1-为什么要有函数" class="headerlink" title="(1) 为什么要有函数"></a>(1) 为什么要有函数</h2><p>如果要在多个地方求 1-100 之间所有数的和，应该怎么做？</p>
<h2 id="2-什么是函数"><a href="#2-什么是函数" class="headerlink" title="(2) 什么是函数"></a>(2) 什么是函数</h2><p>把一段相对独立的具有特定功能的代码块封装起来，形成一个独立实体，就是函数。<br>起个名字（函数名），在后续开发中可以反复调用。<br>函数的作用就是封装一段代码，将来可以重复使用。</p>
<h2 id="3-函数的定义"><a href="#3-函数的定义" class="headerlink" title="(3) 函数的定义"></a>(3) 函数的定义</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1.具名函数</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">name</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&quot;name&quot;</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 2.匿名函数</span></span><br><span class="line"><span class="keyword">var</span> fun = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&quot;fun&quot;</span>);</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h2 id="4-函数的调用"><a href="#4-函数的调用" class="headerlink" title="(4) 函数的调用"></a>(4) 函数的调用</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 函数调用，加 (),即函数名();</span></span><br><span class="line"><span class="comment">// 特点：函数体只有在调用的时候才会执行，调用需要()进行调用。可以调用多次(重复使用)</span></span><br><span class="line">name();</span><br><span class="line">fun();</span><br></pre></td></tr></table></figure>

<p><strong>示例</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 声明函数</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sayHi</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&quot;吃了没？&quot;</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 调用函数</span></span><br><span class="line">sayHi();</span><br><span class="line">​</span><br><span class="line"><span class="comment">// 求1-100之间所有数的和</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getSum</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> sum = <span class="number">0</span>;</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">var</span>  i = <span class="number">0</span>; i &lt; <span class="number">100</span>; i++) &#123;</span><br><span class="line">    sum += i;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="built_in">console</span>.log(sum);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 调用</span></span><br><span class="line">getSum();</span><br></pre></td></tr></table></figure>

<h2 id="5-函数的参数"><a href="#5-函数的参数" class="headerlink" title="(5) 函数的参数"></a>(5) 函数的参数</h2><p><strong>形参和实参</strong></p>
<ol>
<li>形式参数：在声明一个函数的时候，为了函数的功能更加灵活，有些值是固定不了的，对于这些固定不了的值。我们可以给函数设置参数。这个参数没有具体的值，仅仅起到一个占位置的作用，我们通常称之为形式参数，也叫形参</li>
<li>实际参数：如果函数在声明时，设置了形参，那么在函数调用的时候就需要传入对应的参数，我们把传入的参数叫做实际参数，也叫实参。</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> x = <span class="number">5</span>,</span><br><span class="line">  y = <span class="number">6</span>;</span><br><span class="line">fn(x, y);</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params">a, b</span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(a + b);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//x,y实参，有具体的值。函数执行的时候会把x,y复制一份给函数内部的a和b，函数内部的值是复制的新值，无法修改外部的x,y</span></span><br><span class="line"><span class="comment">// 不传值为 undefined;</span></span><br></pre></td></tr></table></figure>

<h2 id="6-函数的返回值"><a href="#6-函数的返回值" class="headerlink" title="(6) 函数的返回值"></a>(6) 函数的返回值</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 函数通过return返回一个返回值</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">re</span>(<span class="params">e</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> e;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(re(<span class="number">1</span>));</span><br><span class="line"></span><br><span class="line"><span class="comment">// 返回值总结</span></span><br><span class="line"><span class="comment">// 1.如果函数没有使用 return语句 ，那么函数有默认的返回值：undefined</span></span><br><span class="line"><span class="comment">// 2.如果函数使用 return语句，那么跟再 return 后面的值，就成了函数的返回值</span></span><br><span class="line"><span class="comment">// 3.如果函数使用 return语句，但是return后面没有任何值，那么函数的返回值也是：undefined</span></span><br><span class="line"><span class="comment">// 4.函数使用 return 语句后，这个函数会在执行完 return 语句之后停止并立即退出，也就是说 return 后面的所有其他代码都不会再执行</span></span><br><span class="line"><span class="comment">// 推荐的做法是要么让函数始终都返回一个值，要么永远都不要返回值</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 求阶乘</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">jieCh</span>(<span class="params">n</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> j = <span class="number">1</span>;</span><br><span class="line">  <span class="keyword">if</span> (n == <span class="number">0</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="number">1</span>;</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="keyword">for</span> (i = <span class="number">1</span>; i &lt;= n; i++) &#123;</span><br><span class="line">      j *= i;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> j;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(jieCh(<span class="number">4</span>));</span><br></pre></td></tr></table></figure>

<h2 id="函数案例"><a href="#函数案例" class="headerlink" title="函数案例"></a>函数案例</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 求 1-n 之间所有的和</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sumN</span>(<span class="params">n</span>) </span>&#123;</span><br><span class="line">  sum = <span class="number">0</span>;</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">1</span>; i &lt;= n; i++) &#123;</span><br><span class="line">    sum += i;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="built_in">console</span>.log(sum);</span><br><span class="line">&#125;</span><br><span class="line">sumN(<span class="number">3</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 圆的面积</span></span><br><span class="line"><span class="comment">// toFixed : 四舍五入,指定小数位数</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">circle</span>(<span class="params">r</span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log((<span class="built_in">Math</span>.PI * r * r).toFixed(<span class="number">2</span>));</span><br><span class="line">&#125;</span><br><span class="line">circle(<span class="number">1</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 求俩数中的最大值</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getMaxNum</span>(<span class="params">numA, numB</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">if</span> (numA &gt; numB) &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&quot;最大值 : &quot;</span> + numA);</span><br><span class="line">  &#125; <span class="keyword">else</span> <span class="keyword">if</span> (numA &lt; numB) &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&quot;最大值 : &quot;</span> + numB);</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(numA + <span class="string">&quot;=&quot;</span> + numB);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">getMaxNum(<span class="number">2</span>, <span class="number">3</span>);</span><br><span class="line">getMaxNum(<span class="number">2</span>, <span class="number">2</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 求三个数的最大值</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getMaxNumInThreeNum</span>(<span class="params">numX, numY, numZ</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">if</span> (numX == numY) &#123;</span><br><span class="line">    <span class="keyword">if</span> (numX == numZ) &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">&quot;三者相等&quot;</span>);</span><br><span class="line">    &#125; <span class="keyword">else</span> <span class="keyword">if</span> (numX &gt; numZ) &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">&quot;最大值 ：&quot;</span> + numX);</span><br><span class="line">      <span class="comment">// 或者: console.log(&quot;最大值 ：&quot; + numY);</span></span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">&quot;最大值 : &quot;</span> + numZ);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125; <span class="keyword">else</span> <span class="keyword">if</span> (numX &gt; numY) &#123;</span><br><span class="line">    <span class="keyword">if</span> (numX &gt; numZ) &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">&quot;最大值 : &quot;</span> + numX);</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">&quot;最大值 : &quot;</span> + numZ);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="keyword">if</span> (numY &gt; numZ) &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">&quot;最大值 ：&quot;</span> + numY);</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">&quot;最大值 ：&quot;</span> + numZ);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">getMaxNumInThreeNum(<span class="number">2</span>, <span class="number">2</span>, <span class="number">1</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 判断一个数是否为素数</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">isPrime</span>(<span class="params">n</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">if</span> (n == <span class="number">0</span> || n == <span class="number">1</span>) &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(n + <span class="string">&quot; 是素数&quot;</span>);</span><br><span class="line">  &#125; <span class="keyword">else</span> <span class="keyword">if</span> (n == <span class="number">2</span>) &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(n + <span class="string">&quot; 不是素数&quot;</span>);</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">2</span>; i &lt; n; i++) &#123;</span><br><span class="line">      <span class="keyword">if</span> (n % i != <span class="number">0</span>) &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(n + <span class="string">&quot; 是素数&quot;</span>);</span><br><span class="line">        <span class="keyword">break</span>;</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(n + <span class="string">&quot; 不是素数&quot;</span>);</span><br><span class="line">        <span class="keyword">break</span>;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">isPrime(<span class="number">4</span>);</span><br></pre></td></tr></table></figure>

<h2 id="作业-1"><a href="#作业-1" class="headerlink" title="作业"></a>作业</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 作业1：</span></span><br><span class="line"><span class="comment">// 数组去重，返回一个新数组</span></span><br><span class="line"><span class="keyword">var</span> arr1 = [<span class="number">2</span>, <span class="number">4</span>, <span class="number">4</span>, <span class="number">5</span>, <span class="number">5</span>, <span class="number">7</span>, <span class="number">8</span>, <span class="number">9</span>];</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">duplicateRemoval</span>(<span class="params">arr</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> newArr = [];</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; arr.length; i++) &#123;</span><br><span class="line">    <span class="keyword">if</span> (newArr.indexOf(arr[i]) == -<span class="number">1</span>) &#123;</span><br><span class="line">      newArr.push(arr[i]);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> newArr;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(duplicateRemoval(arr1));</span><br><span class="line"></span><br><span class="line"><span class="comment">// 作业2：</span></span><br><span class="line"><span class="comment">// 将数组[10,1,35,61,89,36,55]冒泡排序，从小到大</span></span><br><span class="line"><span class="keyword">var</span> arr2 = [<span class="number">10</span>, <span class="number">1</span>, <span class="number">35</span>, <span class="number">61</span>, <span class="number">89</span>, <span class="number">36</span>, <span class="number">55</span>];</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; arr2.length - <span class="number">1</span>; i++) &#123;</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">var</span> j = <span class="number">0</span>; j &lt; arr2.length - <span class="number">1</span> - i; j++) &#123;</span><br><span class="line">    <span class="keyword">if</span> (arr2[j] &gt; arr2[j + <span class="number">1</span>]) &#123;</span><br><span class="line">      <span class="keyword">var</span> temp = arr2[j];</span><br><span class="line">      arr2[j] = arr2[j + <span class="number">1</span>];</span><br><span class="line">      arr2[j + <span class="number">1</span>] = temp;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(arr2);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 作业3：</span></span><br><span class="line"><span class="comment">// 求1!+2!+3!+....+n!</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sumJieCh</span>(<span class="params">n</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> sumJie = <span class="number">0</span>;</span><br><span class="line">  <span class="comment">// n 轮</span></span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">1</span>; i &lt;= n; i++) &#123;</span><br><span class="line">    <span class="comment">// 每轮从 1 开始累乘</span></span><br><span class="line">    jie = <span class="number">1</span>;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> j = <span class="number">1</span>; j &lt;= i; j++) &#123;</span><br><span class="line">      jie *= j;</span><br><span class="line">    &#125;</span><br><span class="line">    sumJie += jie;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> sumJie;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(sumJieCh(<span class="number">1</span>), sumJieCh(<span class="number">2</span>), sumJieCh(<span class="number">3</span>), sumJieCh(<span class="number">4</span>));</span><br><span class="line"></span><br><span class="line"><span class="comment">// 作业4：</span></span><br><span class="line"><span class="comment">// 输入一个年份，判断是否是闰年[闰年：能被4整数并且不能被100整数，或者能被400整数]</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">isLeapYear</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> year = prompt(<span class="string">&quot;请输入年份&quot;</span>);</span><br><span class="line">  <span class="keyword">if</span> (year % <span class="number">4</span> == <span class="number">0</span> &amp;&amp; year % <span class="number">100</span> != <span class="number">0</span>) &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(year + <span class="string">&quot; 是闰年&quot;</span>);</span><br><span class="line">  &#125; <span class="keyword">else</span> <span class="keyword">if</span> (year % <span class="number">400</span> == <span class="number">0</span>) &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(year + <span class="string">&quot; 是世纪闰年&quot;</span>);</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(year + <span class="string">&quot; 不是闰年&quot;</span>);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">isLeapYear();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 作业5：</span></span><br><span class="line"><span class="comment">// 输入某年某月某日，判断这一天是这一年的第几天？（不用做）</span></span><br><span class="line"><span class="comment">// 😁</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 作业6：</span></span><br><span class="line"><span class="comment">// 利用函数的返回值，求1+2+3+4+………+n</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sum</span>(<span class="params">n</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> result = <span class="number">0</span>;</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">1</span>; i &lt;= n; i++) &#123;</span><br><span class="line">    result += i;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> result;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(sum(<span class="number">3</span>));</span><br><span class="line"></span><br><span class="line"><span class="comment">// 作业7：</span></span><br><span class="line"><span class="comment">// 斐波那契数列函数</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fibonacci</span>(<span class="params">n</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> f = [<span class="number">1</span>, <span class="number">1</span>];</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; n - <span class="number">2</span>; i++) &#123;</span><br><span class="line">    f.push(f[i] + f[i + <span class="number">1</span>]);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> f;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(fibonacci(<span class="number">5</span>));</span><br></pre></td></tr></table></figure>

<h2 id="冒泡排序"><a href="#冒泡排序" class="headerlink" title="冒泡排序"></a>冒泡排序</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 冒泡排序</span></span><br><span class="line"><span class="comment">// 从小到大</span></span><br><span class="line"><span class="keyword">var</span> arr1 = [<span class="number">2</span>, <span class="number">1</span>, <span class="number">6</span>, <span class="number">0</span>, <span class="number">3</span>, <span class="number">8</span>, <span class="number">4</span>, <span class="number">5</span>, <span class="number">9</span>, <span class="number">7</span>];</span><br><span class="line"><span class="comment">// 第一层 for 循环是比较多少轮</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; arr1.length - <span class="number">1</span>; i++) &#123;</span><br><span class="line">  <span class="comment">// 第二层 for 循环是每轮比较多少次,递减</span></span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">var</span> j = <span class="number">0</span>; j &lt; arr1.length - <span class="number">1</span> - i; j++) &#123;</span><br><span class="line">    <span class="keyword">if</span> (arr1[j] &gt; arr1[j + <span class="number">1</span>]) &#123;</span><br><span class="line">      <span class="keyword">var</span> temp = arr1[j + <span class="number">1</span>];</span><br><span class="line">      arr1[j + <span class="number">1</span>] = arr1[j];</span><br><span class="line">      arr1[j] = temp;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(arr1);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 从大到小</span></span><br><span class="line"><span class="comment">// 俩数判断后交换顺序改一下就行</span></span><br><span class="line"><span class="keyword">var</span> arr2 = [<span class="number">2</span>, <span class="number">1</span>, <span class="number">6</span>, <span class="number">0</span>, <span class="number">3</span>, <span class="number">8</span>, <span class="number">4</span>, <span class="number">5</span>, <span class="number">9</span>, <span class="number">7</span>];</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; arr2.length - <span class="number">1</span>; i++) &#123;</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">var</span> j = <span class="number">0</span>; j &lt; arr2.length - <span class="number">1</span> - i; j++) &#123;</span><br><span class="line">    <span class="keyword">if</span> (arr2[j] &lt; arr2[j + <span class="number">1</span>]) &#123;</span><br><span class="line">      <span class="keyword">var</span> temp = arr2[j + <span class="number">1</span>];</span><br><span class="line">      arr2[j + <span class="number">1</span>] = arr2[j];</span><br><span class="line">      arr2[j] = temp;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(arr2);</span><br></pre></td></tr></table></figure>

<!-- -------------------------------- -->

<h1 id="八-预解析"><a href="#八-预解析" class="headerlink" title="八. 预解析"></a>八. 预解析</h1><p><code>JavaScript</code> 引擎在对 <code>JavaScript</code> 代码进行解释执行之前，会对 <code>JavaScript</code> 代码进行预解析，在预解析阶段，会将以关键字 <code>var</code> 和 <code>function</code> 开头的语句块提前进行处理。<br>当变量和函数的声明处在作用域比较靠后的位置的时候，变量和函数的声明会被提升到作用域的开头。</p>
<h2 id="1-函数提升"><a href="#1-函数提升" class="headerlink" title="(1) 函数提升"></a>(1) 函数提升</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">func();</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">func</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  alert(<span class="string">&quot;fun&quot;</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 由于 JavaScript 的预解析机制，上面的代码就等效于：</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">func</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  alert(<span class="string">&quot;fun&quot;</span>);</span><br><span class="line">&#125;</span><br><span class="line">func();</span><br></pre></td></tr></table></figure>

<h2 id="2-变量提升"><a href="#2-变量提升" class="headerlink" title="(2) 变量提升"></a>(2) 变量提升</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 变量声明被提升,赋值并没有提升</span></span><br><span class="line"><span class="built_in">console</span>.log(e); <span class="comment">// undefined</span></span><br><span class="line"><span class="keyword">var</span> e = <span class="number">1</span>;</span><br><span class="line"><span class="comment">// 相当于</span></span><br><span class="line"><span class="keyword">var</span> e;</span><br><span class="line"><span class="built_in">console</span>.log(e);</span><br><span class="line">e = <span class="number">1</span>;</span><br></pre></td></tr></table></figure>

<h2 id="3-函数同名"><a href="#3-函数同名" class="headerlink" title="(3) 函数同名"></a>(3) 函数同名</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">func1();</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">func1</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&quot;func1&quot;</span>);</span><br><span class="line">&#125;</span><br><span class="line">func1();</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">func1</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&quot;func2&quot;</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 由于预解析机制，func1的声明会被提升，提升之后的代码为</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">func1</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&quot;func2&quot;</span>);</span><br><span class="line">&#125;</span><br><span class="line">func1();</span><br><span class="line">func1();</span><br><span class="line"><span class="comment">// 同名的函数，后面的会覆盖前面的，所以两次输出结果都是 func2</span></span><br></pre></td></tr></table></figure>

<h2 id="4-变量和函数同名"><a href="#4-变量和函数同名" class="headerlink" title="(4) 变量和函数同名"></a>(4) 变量和函数同名</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(f);</span><br><span class="line"><span class="keyword">var</span> f = <span class="number">1</span>;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">f</span>(<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line"><span class="comment">// 当出现变量声明和函数同名的时候，只会对函数声明进行提升，变量会被忽略。所以上面的代码的输出结果为</span></span><br><span class="line"><span class="comment">// ƒ f() &#123;&#125;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> num = <span class="number">1</span>;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">num</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  alert(num);</span><br><span class="line">&#125;</span><br><span class="line">num(); <span class="comment">// num is not a function</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 当变量和函数同名时,只会对函数声明进行提升，变量会被忽略。</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 同名的变量和函数，变量会覆盖函数，导致函数无法调用</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 通俗来讲就是只要出现同名的函数和变量，优先对函数进行提升。但没用，变量会覆盖函数，最终只有变量声明语句生效</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 按照常规的书写顺序，同名的函数与变量，变量会覆盖函数</span></span><br></pre></td></tr></table></figure>

<h2 id="练习"><a href="#练习" class="headerlink" title="练习"></a>练习</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 先提升</span></span><br><span class="line"><span class="comment">// 再看顺序</span></span><br><span class="line"><span class="comment">// 1</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">test</span>(<span class="params">a, b</span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(a);</span><br><span class="line">  <span class="keyword">var</span> a = <span class="number">3</span>;</span><br><span class="line">  <span class="built_in">console</span>.log(b);</span><br><span class="line">  <span class="keyword">var</span> b = <span class="number">2</span>;</span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">b</span>(<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line">  <span class="built_in">console</span>.log(b);</span><br><span class="line">&#125;</span><br><span class="line">test(<span class="number">1</span>);</span><br><span class="line"><span class="comment">// 变量提升后的顺序:</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">test</span>(<span class="params">a, b</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> a;</span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">b</span>(<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line">  <span class="keyword">var</span> b;</span><br><span class="line">  <span class="built_in">console</span>.log(a);</span><br><span class="line">  a = <span class="number">3</span>;</span><br><span class="line">  <span class="built_in">console</span>.log(b);</span><br><span class="line">  b = <span class="number">2</span>;</span><br><span class="line">  <span class="built_in">console</span>.log(b);</span><br><span class="line">&#125;</span><br><span class="line">test(<span class="number">1</span>);</span><br><span class="line"><span class="comment">// 所以结果为</span></span><br><span class="line"><span class="comment">// 1</span></span><br><span class="line"><span class="comment">// ƒ b() &#123;&#125;</span></span><br><span class="line"><span class="comment">// 2</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 2</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">test</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(a);</span><br><span class="line">  <span class="built_in">console</span>.log(b);</span><br><span class="line">  <span class="keyword">var</span> b = <span class="number">234</span>;</span><br><span class="line">  <span class="built_in">console</span>.log(b);</span><br><span class="line">  a = <span class="number">123</span>;</span><br><span class="line">  <span class="built_in">console</span>.log(a);</span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">a</span>(<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line">  <span class="keyword">var</span> a;</span><br><span class="line">  b = <span class="number">234</span>;</span><br><span class="line">  <span class="keyword">var</span> b = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;&#125;;</span><br><span class="line">  <span class="built_in">console</span>.log(a);</span><br><span class="line">  <span class="built_in">console</span>.log(b);</span><br><span class="line">&#125;</span><br><span class="line">test();</span><br><span class="line"><span class="comment">// 变量提升后的顺序:</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">test</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> b;</span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">a</span>(<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line">  <span class="keyword">var</span> a;</span><br><span class="line">  <span class="built_in">console</span>.log(a);</span><br><span class="line">  <span class="built_in">console</span>.log(b);</span><br><span class="line">  b = <span class="number">234</span>;</span><br><span class="line">  <span class="built_in">console</span>.log(b);</span><br><span class="line">  a = <span class="number">123</span>;</span><br><span class="line">  <span class="built_in">console</span>.log(a);</span><br><span class="line">  b = <span class="number">234</span>;</span><br><span class="line">  <span class="keyword">var</span> b = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;&#125;;</span><br><span class="line">  <span class="built_in">console</span>.log(a);</span><br><span class="line">  <span class="built_in">console</span>.log(b);</span><br><span class="line">&#125;</span><br><span class="line">test();</span><br><span class="line"><span class="comment">// 所以结果为:</span></span><br><span class="line"><span class="comment">// ƒ a() &#123;&#125;</span></span><br><span class="line"><span class="comment">// undefined</span></span><br><span class="line"><span class="comment">// 234</span></span><br><span class="line"><span class="comment">// 123</span></span><br><span class="line"><span class="comment">// 123</span></span><br><span class="line"><span class="comment">// ƒ () &#123;&#125;</span></span><br></pre></td></tr></table></figure>

<h2 id="5-预解析是分作用域的"><a href="#5-预解析是分作用域的" class="headerlink" title="(5) 预解析是分作用域的"></a>(5) 预解析是分作用域的</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">m</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> m = <span class="string">&quot;m&quot;</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(m); <span class="comment">// m 未定义</span></span><br><span class="line"><span class="comment">// 解析后的代码:</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">m</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> m;</span><br><span class="line">  m = <span class="string">&quot;m&quot;</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(m); <span class="comment">// m 未定义</span></span><br></pre></td></tr></table></figure>

<h2 id="6-函数表达式不会提升"><a href="#6-函数表达式不会提升" class="headerlink" title="(6) 函数表达式不会提升"></a>(6) 函数表达式不会提升</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">fun1();</span><br><span class="line"><span class="keyword">var</span> fun1 = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&quot;666&quot;</span>);</span><br><span class="line">&#125;;</span><br><span class="line"><span class="comment">// 结果是 : func1 is not a function，原因就是函数表达式，并不会被提升。只是简单地当做变量声明进行了处理，如下</span></span><br><span class="line"><span class="keyword">var</span> fun1;</span><br><span class="line">fun1();</span><br><span class="line">fun1 = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&quot;666&quot;</span>);</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h2 id="7-作用域"><a href="#7-作用域" class="headerlink" title="(7)作用域"></a>(7)作用域</h2><h3 id="1-全局作用域"><a href="#1-全局作用域" class="headerlink" title="(1) 全局作用域"></a>(1) 全局作用域</h3><p>直接编写在 <code>script</code> 标签之中的 <code>JS</code> 代码，都是全局作用域；或者是一个单独的 <code>JS</code> 文件中的。<br>全局作用域在页面打开时创建，页面关闭时销毁；<br>在全局作用域中有一个全局对象 <code>window</code>（代表的是一个浏览器的窗口，由浏览器创建），可以直接使用。<br>所有创建的变量都会作为 <code>window</code> 对象的属性保存。</p>
<h3 id="2-局部作用域-函数作用域"><a href="#2-局部作用域-函数作用域" class="headerlink" title="(2) 局部作用域 ( 函数作用域 )"></a>(2) 局部作用域 ( 函数作用域 )</h3><p>在函数内部就是局部作用域，这个代码的名字只在函数的内部起作用</p>
<h3 id="3-隐式全局变量"><a href="#3-隐式全局变量" class="headerlink" title="(3) 隐式全局变量"></a>(3) 隐式全局变量</h3><p>声明变量使用<code>var</code>, 如果不使用 <code>var</code> 声明的变量就是全局变量( 禁用 )<br>因为在任何代码结构中都可以使用该语法. 那么再代码维护的时候会有问题. 所以除非特殊原因不要这么用.</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">fun2();</span><br><span class="line"><span class="built_in">console</span>.log(a);</span><br><span class="line"><span class="built_in">console</span>.log(b);</span><br><span class="line"><span class="built_in">console</span>.log(c);</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fun2</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> a = <span class="number">1</span>;</span><br><span class="line">  b = <span class="number">1</span>;</span><br><span class="line">  c = <span class="number">1</span>;</span><br><span class="line">  <span class="built_in">console</span>.log(a);</span><br><span class="line">  <span class="built_in">console</span>.log(b);</span><br><span class="line">  <span class="built_in">console</span>.log(c);</span><br><span class="line">&#125;</span><br><span class="line">fun2 执行后获得隐式全局变量 <span class="string">`b`</span> 和 <span class="string">`c`</span></span><br></pre></td></tr></table></figure>

<h1 id="九-对象"><a href="#九-对象" class="headerlink" title="九. 对象"></a>九. 对象</h1><h2 id="1-为什么要有对象"><a href="#1-为什么要有对象" class="headerlink" title="(1) 为什么要有对象"></a>(1) 为什么要有对象</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">printPerson</span>(<span class="params">name, age, sex....</span>) </span>&#123;&#125;</span><br><span class="line"><span class="comment">// 函数的参数如果特别多的话，可以使用对象简化</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">printPerson</span>(<span class="params">person</span>) </span>&#123;  </span><br><span class="line">   <span class="built_in">console</span>.log(person.name);  </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="2-什么是对象"><a href="#2-什么是对象" class="headerlink" title="(2) 什么是对象"></a>(2) 什么是对象</h2><p>现实生活中：万物皆对象，对象是一个具体的事物，一个具体的事物就会有行为和特征。<br>举例： 一辆车、一部手机、一台电脑、一张桌子<br>车是一类事物，门口停的那辆车才是对象。特征：红色、四个轮子，行为：驾驶、刹车</p>
<h2 id="3-JavaScript-中的对象"><a href="#3-JavaScript-中的对象" class="headerlink" title="(3) JavaScript 中的对象"></a>(3) JavaScript 中的对象</h2><p>JavaScript 的对象是无序属性的集合。<br>其属性可以包含基本值、对象或函数。对象就是一组没有顺序的值。我们可以把 JavaScript 中的对象想象成键值对，其中值可以是数据和函数。<br><code>Key</code> = <code>value</code><br>对象的行为和特征<br>特征—属性<br>行为—方法<br>Tips：<br>事物的特征在对象中用属性来表示。<br>事物的行为在对象中用方法来表示。</p>
<h2 id="4-对象创建方式"><a href="#4-对象创建方式" class="headerlink" title="(4) 对象创建方式"></a>(4) 对象创建方式</h2><h3 id="1-对象字面量"><a href="#1-对象字面量" class="headerlink" title="1. 对象字面量"></a>1. 对象字面量</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&quot;zs&quot;</span>,</span><br><span class="line">  <span class="attr">age</span>: <span class="number">18</span>,</span><br><span class="line">  <span class="attr">sex</span>: <span class="literal">true</span></span><br><span class="line">  fun=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&quot;fun&quot;</span>)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h3 id="2-new-Object-创建对象"><a href="#2-new-Object-创建对象" class="headerlink" title="2. new Object()创建对象"></a>2. new Object()创建对象</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> person = <span class="keyword">new</span> <span class="built_in">Object</span>();</span><br><span class="line">person.name = <span class="string">&quot;lisi&quot;</span>;</span><br><span class="line">person.age = <span class="number">35</span>;</span><br><span class="line">person.job = <span class="string">&quot;codeman&quot;</span>;</span><br><span class="line">person.say = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&quot;Hello&quot;</span>);</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h3 id="3-工厂函数创建对象"><a href="#3-工厂函数创建对象" class="headerlink" title="3. 工厂函数创建对象"></a>3. 工厂函数创建对象</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">createPerson</span>(<span class="params">name, age, job</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> person = <span class="keyword">new</span> <span class="built_in">Object</span>();</span><br><span class="line">  person.name = name;</span><br><span class="line">  person.age = age;</span><br><span class="line">  person.job = job;</span><br><span class="line">  person.say = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&quot;Hello&quot;</span>);</span><br><span class="line">  &#125;;</span><br><span class="line">  <span class="keyword">return</span> person;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> p1 = createPerson(<span class="string">&quot;张三&quot;</span>, <span class="number">22</span>, <span class="string">&quot;actor&quot;</span>);</span><br></pre></td></tr></table></figure>

<h3 id="4-自定义构造函数"><a href="#4-自定义构造函数" class="headerlink" title="4. 自定义构造函数"></a>4. 自定义构造函数</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params">name, age, job</span>) </span>&#123;</span><br><span class="line">  <span class="built_in">this</span>.name = name;</span><br><span class="line">  <span class="built_in">this</span>.age = age;</span><br><span class="line">  <span class="built_in">this</span>.job = job;</span><br><span class="line">  <span class="built_in">this</span>.say = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&quot;Hello&quot;</span>);</span><br><span class="line">  &#125;;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> p1 = <span class="keyword">new</span> Person(<span class="string">&quot;张三&quot;</span>, <span class="number">22</span>, <span class="string">&quot;actor&quot;</span>);</span><br></pre></td></tr></table></figure>

<h2 id="5-属性和方法"><a href="#5-属性和方法" class="headerlink" title="(5) 属性和方法"></a>(5) 属性和方法</h2><ol>
<li><p>如果一个变量属于一个对象所有，那么该变量就可以称之为该对象的一个属性</p>
</li>
<li><p>如果一个函数属于一个对象所有，那么该函数就可以称之为该对象的一个方法</p>
</li>
</ol>
<h2 id="6-new-关键字"><a href="#6-new-关键字" class="headerlink" title="(6) new 关键字"></a>(6) new 关键字</h2><p>构造函数，是一种特殊的函数。主要用来在创建对象时初始化对象，即为对象成员变量赋初始值，总与 new 运算符一起使用在创建对象的语句中。</p>
<ol>
<li><p>构造函数用于创建一类对象，首字母要大写。</p>
</li>
<li><p>构造函数要和 <code>new</code> 一起使用才有意义。</p>
</li>
</ol>
<p><strong><code>new</code> 在执行时会做四件事情：</strong></p>
<p>1、new 会在内存中创建一个新的空对象<br>2、new 会让 this 指向这个新的对象<br>3、new 会返回这个新对象</p>
<h2 id="7-this"><a href="#7-this" class="headerlink" title="(7) this"></a>(7) this</h2><p>函数内部的 <code>this</code> 几个特点：</p>
<ol>
<li>函数在定义的时候 <code>this</code> 是不确定的，只有在调用的时候才可以确定</li>
<li>一般函数直接执行，内部 <code>this</code> 指向全局 window</li>
<li>函数作为一个对象的方法，被该对象所调用，那么 <code>this</code> 指向的是该对象</li>
<li>构造函数中的 <code>this</code> 其实是一个隐式对象，类似一个初始化的模型，所有方法和属性都挂载到了这个隐式对象身上，后续通过 new 关键字来调用，从而实现实例化</li>
</ol>
<h2 id="8-对象的使用"><a href="#8-对象的使用" class="headerlink" title="(8) 对象的使用"></a>(8) 对象的使用</h2><p>遍历对象的属性<br>通过 for..in 语法可以遍历一个对象<br>删除对象的属性</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 通过 for ... in 遍历对象的属性</span></span><br><span class="line"><span class="keyword">var</span> obj1 = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&quot;man&quot;</span>,</span><br><span class="line">  <span class="attr">age</span>: <span class="number">20</span>,</span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> key <span class="keyword">in</span> obj1) &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(key);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 遍历对象的属性值</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> key <span class="keyword">in</span> obj1) &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(obj1[key]);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 删除对象的属性</span></span><br><span class="line"><span class="keyword">delete</span> obj1.name;</span><br></pre></td></tr></table></figure>

<h1 id="十-JavaScript-错误"><a href="#十-JavaScript-错误" class="headerlink" title="十. JavaScript  错误"></a>十. JavaScript  错误</h1><h2 id="1-JavaScript-try-和-catch"><a href="#1-JavaScript-try-和-catch" class="headerlink" title="(1) JavaScript try 和 catch"></a>(1) JavaScript <code>try</code> 和 <code>catch</code></h2><p><code>try</code>  语句允许我们定义在执行时进行错误测试的代码块。<br><code>catch</code>  语句允许我们定义当 <code>try</code> 代码块发生错误时，所执行的代码块。<br><code>JavaScript</code> 语句  <code>try</code>  和  <code>catch</code>  是成对出现的。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">t</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">try</span> &#123;</span><br><span class="line">    alertt(<span class="string">&quot;666&quot;</span>);</span><br><span class="line">  &#125; <span class="keyword">catch</span> (error) &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(error.message); <span class="comment">// alertt is not defined</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">t();</span><br><span class="line"><span class="comment">// catch 块会捕捉到 try 块中的错误，会执行 catch 里的部分</span></span><br></pre></td></tr></table></figure>

<h2 id="2-finally-语句"><a href="#2-finally-语句" class="headerlink" title="(2) finally 语句"></a>(2) finally 语句</h2><p><code>finally</code> 语句不论之前的 <code>try</code> 和 <code>catch</code> 中是否产生异常都会执行该代码块</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">t</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">try</span> &#123;</span><br><span class="line">    alertt(<span class="string">&quot;666&quot;</span>);</span><br><span class="line">  &#125; <span class="keyword">catch</span> (error) &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(error.message); <span class="comment">// alertt is not defined</span></span><br><span class="line">  &#125; <span class="keyword">finally</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&quot;finally&quot;</span>);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">t();</span><br></pre></td></tr></table></figure>

<h2 id="3-Throw-语句"><a href="#3-Throw-语句" class="headerlink" title="(3) Throw 语句"></a>(3) Throw 语句</h2><p><code>throw</code> 语句允许我们创建自定义错误。<br>正确的技术术语是：创建或抛出异常（exception）。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 检测输入变量的值。如果值是错误的，会抛出一个异常（错误）。catch 会捕捉到这个错误，并显示一段自定义的错误消息</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">myFunction</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> x = prompt();</span><br><span class="line">  <span class="keyword">try</span> &#123;</span><br><span class="line">    <span class="keyword">if</span> (x == <span class="string">&quot;&quot;</span>) <span class="keyword">throw</span> <span class="string">&quot;值为空&quot;</span>;</span><br><span class="line">    <span class="keyword">if</span> (<span class="built_in">isNaN</span>(x)) <span class="keyword">throw</span> <span class="string">&quot;请输入数字&quot;</span>;</span><br><span class="line">    x = <span class="built_in">Number</span>(x);</span><br><span class="line">    <span class="keyword">if</span> (x &lt; <span class="number">5</span>) <span class="keyword">throw</span> <span class="string">&quot;太小&quot;</span>;</span><br><span class="line">    <span class="keyword">if</span> (x &gt; <span class="number">10</span>) <span class="keyword">throw</span> <span class="string">&quot;太大&quot;</span>;</span><br><span class="line">    <span class="keyword">else</span> &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">&quot;good&quot;</span>);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125; <span class="keyword">catch</span> (err) &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(err);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">myFunction();</span><br></pre></td></tr></table></figure>

<h2 id="作业-2"><a href="#作业-2" class="headerlink" title="作业"></a>作业</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 作业1;</span></span><br><span class="line"><span class="comment">// 创建一个电脑对象,有颜色,有重量,有品牌,有型号,可以看电影,可以听音乐,可以打游戏,可以敲代码;</span></span><br><span class="line"><span class="keyword">var</span> computer = &#123;</span><br><span class="line">  <span class="attr">color</span>: <span class="string">&quot;#494f5c&quot;</span>,</span><br><span class="line">  <span class="attr">weight</span>: <span class="string">&quot;120&quot;</span>,</span><br><span class="line">  <span class="attr">brand</span>: <span class="string">&quot;Brand&quot;</span>,</span><br><span class="line">  <span class="attr">model</span>: <span class="string">&quot;model&quot;</span>,</span><br><span class="line">  <span class="attr">seeMovies</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&quot;看电影&quot;</span>);</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">listenMusics</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&quot;听音乐&quot;</span>);</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">gaming</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&quot;打游戏&quot;</span>);</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">coding</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&quot;coding&quot;</span>);</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br><span class="line"><span class="built_in">console</span>.log(computer);</span><br><span class="line">computer.gaming();</span><br><span class="line">computer.coding();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 作业2;</span></span><br><span class="line"><span class="comment">// 创建一个按钮对象, 宽, 高, 背景颜色, 点击行为, 按钮有鼠标进入的行为;</span></span><br><span class="line"><span class="keyword">var</span> button = <span class="keyword">new</span> <span class="built_in">Object</span>();</span><br><span class="line">button.width = <span class="string">&quot;120px&quot;</span>;</span><br><span class="line">button.height = <span class="string">&quot;40px&quot;</span>;</span><br><span class="line">button.backgroundColor = <span class="string">&quot;#494f5c&quot;</span>;</span><br><span class="line">button.click = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&quot;click&quot;</span>);</span><br><span class="line">&#125;;</span><br><span class="line">button.hover = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&quot;hover&quot;</span>);</span><br><span class="line">&#125;;</span><br><span class="line"><span class="built_in">console</span>.log(button);</span><br><span class="line">button.click();</span><br><span class="line">button.hover();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 作业3;</span></span><br><span class="line"><span class="comment">// 创建一个车的对象, 有重量, 颜色, 牌子, 可以载人, 拉货;</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">createCar</span>(<span class="params">weight, color, brand, canBeManned, pickUpTheGoods</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> car = <span class="keyword">new</span> <span class="built_in">Object</span>();</span><br><span class="line">  car.weight = weight;</span><br><span class="line">  car.color = color;</span><br><span class="line">  car.brand = brand;</span><br><span class="line">  car.canBeManned = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&quot;可以载人&quot;</span>);</span><br><span class="line">  &#125;;</span><br><span class="line">  car.pickUpTheGoods = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&quot;可拉货&quot;</span>);</span><br><span class="line">  &#125;;</span><br><span class="line">  <span class="keyword">return</span> car;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> car1 = createCar(<span class="string">&quot;2000kg&quot;</span>, <span class="string">&quot;#494f5c&quot;</span>, <span class="string">&quot;brand&quot;</span>);</span><br><span class="line"><span class="built_in">console</span>.log(car1);</span><br><span class="line">car1.canBeManned();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 作业4;</span></span><br><span class="line"><span class="comment">// 利用对象属性不能重复的特性给数组去重;</span></span><br><span class="line"><span class="keyword">var</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">3</span>, <span class="number">5</span>, <span class="number">5</span>, <span class="number">6</span>, <span class="number">8</span>, <span class="number">8</span>, <span class="number">9</span>, <span class="number">9</span>];</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">duplicateRemoval</span>(<span class="params">arr</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> obj = &#123;&#125;;</span><br><span class="line">  <span class="keyword">var</span> newArr = [];</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; arr.length; i++) &#123;</span><br><span class="line">    <span class="keyword">if</span> (!obj[arr[i]]) &#123;</span><br><span class="line">      newArr.push(arr[i]);</span><br><span class="line">      obj[arr[i]] = <span class="literal">true</span>;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> newArr;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(duplicateRemoval(arr));</span><br></pre></td></tr></table></figure>

<h1 id="十一-js-内置对象"><a href="#十一-js-内置对象" class="headerlink" title="十一. js 内置对象"></a>十一. js 内置对象</h1><h2 id="1-内置对象"><a href="#1-内置对象" class="headerlink" title="1.内置对象"></a>1.内置对象</h2><p><code>JavaScript</code> 中的对象分为 4 种：内置对象、浏览器对象、自定义对象、DOM 对象。<br><code>JavaScript</code> 提供多个内置对象：Math/Array/Number/String/Boolean …<br>对象只是带有属性和方法的特殊数据类型。学习一个内置对象的使用，只要学会其常用的成员的使用(通过查文档学习)。内置对象的方法很多，我们只需要知道内置对象提供的常用方法，使用的时候查询文档。</p>
<h2 id="2-Math-对象"><a href="#2-Math-对象" class="headerlink" title="2. Math 对象"></a>2. Math 对象</h2><p><code>Math</code> 对象不是构造函数，它具有数学常数和函数的属性和方法，都以静态成员的方式提供。<br>跟数学相关的运算来找 <code>Math</code> 中的成员(求绝对值，取整)。</p>
<h3 id="1-常用属性"><a href="#1-常用属性" class="headerlink" title="(1) 常用属性"></a>(1) 常用属性</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Math</span>.PI; <span class="comment">// 圆周率</span></span><br></pre></td></tr></table></figure>

<h3 id="2-常用方法"><a href="#2-常用方法" class="headerlink" title="(2) 常用方法"></a>(2) 常用方法</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Math</span>.random(); <span class="comment">// 生成随机数</span></span><br><span class="line"><span class="built_in">Math</span>.floor(); <span class="comment">// 向下取整</span></span><br><span class="line"><span class="built_in">Math</span>.ceil(); <span class="comment">// 向上取整</span></span><br><span class="line"><span class="built_in">Math</span>.round(); <span class="comment">// 取整，四舍五入</span></span><br><span class="line"><span class="built_in">Math</span>.abs(); <span class="comment">// 绝对值</span></span><br><span class="line"><span class="built_in">Math</span>.max(); <span class="comment">// 最大值</span></span><br><span class="line"><span class="built_in">Math</span>.min(); <span class="comment">// 最小值</span></span><br><span class="line"><span class="built_in">Math</span>.sin(); <span class="comment">// 正弦</span></span><br><span class="line"><span class="built_in">Math</span>.cos(); <span class="comment">// 余弦</span></span><br><span class="line"><span class="built_in">Math</span>.pow(); <span class="comment">// 求指数次幂</span></span><br><span class="line"><span class="built_in">Math</span>.sqrt(); <span class="comment">// 求平方根</span></span><br></pre></td></tr></table></figure>

<h2 id="3-Date-对象"><a href="#3-Date-对象" class="headerlink" title="3. Date 对象"></a>3. Date 对象</h2><p>创建 <code>Date</code> 实例用来处理日期和时间。<code>Date</code> 对象基于 1970 年 1 月 1 日（世界标准时间）起的毫秒数。</p>
<h3 id="1-创建日期对象"><a href="#1-创建日期对象" class="headerlink" title="(1) 创建日期对象"></a>(1) 创建日期对象</h3><p><code>Date()</code> 是构造函数</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> date = <span class="keyword">new</span> <span class="built_in">Date</span>(); <span class="comment">// 获取到的是 1970 年 1 月 1 日至今的毫秒数</span></span><br></pre></td></tr></table></figure>

<h3 id="2-日期原始值"><a href="#2-日期原始值" class="headerlink" title="(2) 日期原始值"></a>(2) 日期原始值</h3><p>getTime()：获取 1970 年 1 月 1 日至今的毫秒数<br>valueOf();原始值，获取 1970 年 1 月 1 日至今的毫秒数</p>
<h3 id="3-获取日期指定部分"><a href="#3-获取日期指定部分" class="headerlink" title="(3) 获取日期指定部分"></a>(3) 获取日期指定部分</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">date.getMilliseconds();</span><br><span class="line">date.getSeconds(); <span class="comment">// 返回 0-59</span></span><br><span class="line">date.getMinutes(); <span class="comment">// 返回 0-59</span></span><br><span class="line">date.getHours(); <span class="comment">// 返回 0-23</span></span><br><span class="line">date.getDay(); <span class="comment">// 返回星期几 0 周日   6 周 6</span></span><br><span class="line">date.getDate(); <span class="comment">// 返回当前月的第几天</span></span><br><span class="line">date.getMonth(); <span class="comment">// 返回月份，从 0 开始</span></span><br><span class="line">date.getFullYear(); <span class="comment">//返回 4 位的年份 如 2016</span></span><br></pre></td></tr></table></figure>

<h2 id="4-Array-对象"><a href="#4-Array-对象" class="headerlink" title="4. Array 对象"></a>4. Array 对象</h2><h3 id="1-创建数组对象的两种方式"><a href="#1-创建数组对象的两种方式" class="headerlink" title="(1) 创建数组对象的两种方式"></a>(1) 创建数组对象的两种方式</h3><p>1、字面量方式<br>2、new Array()</p>
<h3 id="2-检测一个对象是否是数组"><a href="#2-检测一个对象是否是数组" class="headerlink" title="(2) 检测一个对象是否是数组"></a>(2) 检测一个对象是否是数组</h3><p><code>instanceof</code> 如果返回 <code>true</code> 就是数组，<code>false</code> 是非数组 ( 这玩意儿很少用 )<br><code>Array.isArray()</code> 如果返回 <code>true</code> 就是数组，<code>false</code> 是非数组 ( 常用 )<br><code>valueOf()</code> 返回数组对象本身</p>
<h3 id="3-栈操作-先进后出"><a href="#3-栈操作-先进后出" class="headerlink" title="(3) 栈操作 (先进后出)"></a>(3) 栈操作 (先进后出)</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">push(); <span class="comment">// 添加元素</span></span><br><span class="line">pop(); <span class="comment">// 删除元素</span></span><br></pre></td></tr></table></figure>

<p><img src= "" data-lazy-src="https://codehhr.coding.net/p/codehhr/d/images/git/raw/master/js/stack.png" alt="stack"></p>
<h3 id="4-队列操作-先进先出"><a href="#4-队列操作-先进先出" class="headerlink" title="(4) 队列操作 (先进先出)"></a>(4) 队列操作 (先进先出)</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">shift(); <span class="comment">// 删除元素</span></span><br><span class="line">unshift(); <span class="comment">// 添加元素</span></span><br></pre></td></tr></table></figure>

<h3 id="5-排序方法"><a href="#5-排序方法" class="headerlink" title="(5) 排序方法"></a>(5) 排序方法</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">reverse(); <span class="comment">// 翻转数组</span></span><br><span class="line">sort(); <span class="comment">// 只看第一位数来排序</span></span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//   var arr = [1, 2, 3, 4, 9, 8, 7, 6, 5];</span></span><br><span class="line"><span class="keyword">var</span> arr1 = [<span class="number">100</span>, <span class="number">200</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">9</span>, <span class="number">8</span>, <span class="number">7</span>, <span class="number">6</span>, <span class="number">5</span>];</span><br><span class="line"><span class="built_in">console</span>.log(arr1.sort()); <span class="comment">// 然而排序后的结果不是咱想要的</span></span><br></pre></td></tr></table></figure>

<p><strong>可以这样</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">arr1.sort(<span class="function"><span class="keyword">function</span> (<span class="params">a, b</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> a - b; <span class="comment">// 从小到大排序</span></span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">arr1.sort(<span class="function"><span class="keyword">function</span> (<span class="params">a, b</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> b - a; <span class="comment">// 从大到小排序</span></span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<h3 id="6-操作方法"><a href="#6-操作方法" class="headerlink" title="(6) 操作方法"></a>(6) 操作方法</h3><h4 id="concat-把参数拼接到当前数组、-或者用于连接两个或多个数组"><a href="#concat-把参数拼接到当前数组、-或者用于连接两个或多个数组" class="headerlink" title="concat() 把参数拼接到当前数组、  或者用于连接两个或多个数组"></a><code>concat()</code> 把参数拼接到当前数组、  或者用于连接两个或多个数组</h4><h4 id="slice-start-end"><a href="#slice-start-end" class="headerlink" title="slice(start,end)"></a><code>slice(start,end)</code></h4><p>1、从 <code>start</code> 开始截取元素，到 <code>end</code> 结束，包括 <code>start</code>,不包括 <code>end</code>,返回新数组，<code>start</code>,<code>end</code> 是索引,<br>2、不会改变原始数组</p>
<h4 id="splice"><a href="#splice" class="headerlink" title="splice()"></a><code>splice()</code></h4><p><code>splice(start,length)</code><br>1、从 <code>start</code> 开始截取元素，截取 <code>length</code> 个，,<code>返回新数组，start</code> 是索引,<code>length</code> 是个数, <strong>如果不写<code>length</code>参数,会从<code>start</code>一直删到最后</strong><br>2、会改变元素的数组</p>
<h3 id="7-位置方法"><a href="#7-位置方法" class="headerlink" title="(7) 位置方法"></a>(7) 位置方法</h3><p><code>indexOf()</code> 寻找元素位置,返回第一次出现的位置的索引值,没有找到返回 -1，<br><code>lastIndexOf()</code>   从后往前找<br>上述方法只是查找顺序不一样 结果都是索引值</p>
<h3 id="8-数组迭代方法"><a href="#8-数组迭代方法" class="headerlink" title="(8) 数组迭代方法"></a>(8) 数组迭代方法</h3><p>1、<code>forEach()</code> 方法用于调用数组的每个元素，并将元素传递给回调函数</p>
<p>可以拿到每个数组中的值，没有返回值</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">array.forEach(<span class="function"><span class="keyword">function</span>(<span class="params">value, index</span>))</span></span><br><span class="line"><span class="function">// <span class="title">value</span> 必需,当前元素</span></span><br><span class="line"><span class="function">// <span class="title">Index</span> 可选,当前元素索引值</span></span><br></pre></td></tr></table></figure>

<p>2、<code>every()</code>, <code>some()</code> 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）<br><code>some()</code>,<code>every()</code> 方法的参数是一个回调函数，回调函数中的第一个参数是数组的元素，第二个参数是数组的索引<br><code>some()</code>,<code>every()</code> 方法都会返回新的数组</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> flag1 = arr3.every(<span class="function"><span class="keyword">function</span> (<span class="params">value, index</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> value &gt; <span class="number">55</span>;</span><br><span class="line">&#125;);</span><br><span class="line"><span class="built_in">console</span>.log(flag1);</span><br><span class="line"><span class="keyword">var</span> flag2 = arr3.some(<span class="function"><span class="keyword">function</span> (<span class="params">value, index</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> value &gt;= <span class="number">88</span>;</span><br><span class="line">&#125;);</span><br><span class="line"><span class="built_in">console</span>.log(flag2);</span><br></pre></td></tr></table></figure>

<p><code>every()</code> :判断回调函数中的表达式是否全部满足，如果满足，返回值就是 <code>true</code>,只要有一个不满足就是 <code>false</code></p>
<p><code>some</code> 判断回调函数中的表达式是否有一个满足，如果至少一个满足，返回值就是 <code>true</code></p>
<h3 id="9-清空数组"><a href="#9-清空数组" class="headerlink" title="(9) 清空数组"></a>(9) 清空数组</h3><h4 id="方式-1-推荐"><a href="#方式-1-推荐" class="headerlink" title="方式 1 推荐"></a>方式 1 推荐</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">arr = [];</span><br></pre></td></tr></table></figure>

<h4 id="方式-2"><a href="#方式-2" class="headerlink" title="方式 2"></a>方式 2</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">arr.length = <span class="number">0</span>;</span><br></pre></td></tr></table></figure>

<h4 id="方式-3"><a href="#方式-3" class="headerlink" title="方式 3"></a>方式 3</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">arr.splice(<span class="number">0</span>, arr.length);</span><br><span class="line"><span class="comment">// 或者,不写 length ,会一直删到最后</span></span><br><span class="line">arr.splice(<span class="number">0</span>);</span><br></pre></td></tr></table></figure>

<h3 id="10-数组转化字符串"><a href="#10-数组转化字符串" class="headerlink" title="(10) 数组转化字符串"></a>(10) 数组转化字符串</h3><p><code>join()</code> 将数组转化为字符串，以参数分割</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">&quot;31423412&quot;</span>;</span><br><span class="line"><span class="built_in">console</span>.log(str.split(<span class="string">&quot;&quot;</span>).join()); <span class="comment">// 3,1,4,2,3,4,1,2</span></span><br><span class="line"><span class="built_in">console</span>.log(str.split(<span class="string">&quot;&quot;</span>).join(<span class="string">&quot;&quot;</span>)); <span class="comment">// 31423412</span></span><br><span class="line"><span class="built_in">console</span>.log(str.split(<span class="string">&quot;&quot;</span>).join(<span class="string">&quot;-&quot;</span>)); <span class="comment">// 3-1-4-2-3-4-1-2</span></span><br></pre></td></tr></table></figure>

<h2 id="5-基本包装类型"><a href="#5-基本包装类型" class="headerlink" title="5. 基本包装类型"></a>5. 基本包装类型</h2><p>为了方便操作基本数据类型，<code>JavaScript</code> 还提供了三个特殊的引用类型：<code>String</code>,<code>Number</code>,<code>Boolean</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// s1是基本类型，基本类型是没有方法来操作的</span></span><br><span class="line"><span class="keyword">var</span> s1 = <span class="string">&#x27;zhangsan&#x27;</span>;</span><br><span class="line"><span class="keyword">var</span> s2 = s1.substring(<span class="number">5</span>);</span><br><span class="line">​</span><br><span class="line"><span class="comment">// 当调用 s1.substring(5) 的时候，先把 s1 包装成 String 类型的临时对象，再调用 substring 方法，最后销毁临时对象, 相当于：</span></span><br><span class="line"><span class="keyword">var</span> s1 = <span class="keyword">new</span> <span class="built_in">String</span>(<span class="string">&#x27;zhangsan&#x27;</span>);</span><br><span class="line"><span class="keyword">var</span> s2 = s1.substring(<span class="number">5</span>);</span><br><span class="line">s1 = <span class="literal">null</span>;</span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 创建基本包装类型的对象</span></span><br><span class="line"><span class="keyword">var</span> num = <span class="number">18</span>; <span class="comment">//数值，基本类型</span></span><br><span class="line"><span class="keyword">var</span> num = <span class="built_in">Number</span>(<span class="string">&quot;18&quot;</span>); <span class="comment">//类型转换</span></span><br><span class="line"><span class="keyword">var</span> num = <span class="keyword">new</span> <span class="built_in">Number</span>(<span class="number">18</span>); <span class="comment">//基本包装类型，对象</span></span><br><span class="line"><span class="comment">// Number 和 Boolean 基本包装类型基本不用，使用的话可能会引起歧义。例如：</span></span><br><span class="line"><span class="keyword">var</span> b1 = <span class="keyword">new</span> <span class="built_in">Boolean</span>(<span class="literal">false</span>);</span><br><span class="line"><span class="keyword">var</span> b2 = b1 &amp;&amp; <span class="literal">true</span>; <span class="comment">// 结果是 true, 因为 object &amp;&amp; true = true</span></span><br></pre></td></tr></table></figure>

<h2 id="6-String-对象"><a href="#6-String-对象" class="headerlink" title="6. String 对象"></a>6. String 对象</h2><h3 id="1-字符串的不可变"><a href="#1-字符串的不可变" class="headerlink" title="(1) 字符串的不可变"></a>(1) 字符串的不可变</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">&quot;abc&quot;</span>;</span><br><span class="line">str = <span class="string">&quot;hello&quot;</span>;</span><br><span class="line"><span class="comment">// 当重新给 str 赋值的时候，常量 &#x27;abc&#x27;不会被修改，依然在内存中</span></span><br><span class="line"><span class="comment">// 重新给字符串赋值，会重新在内存中开辟空间，这个特点就是字符串的不可变</span></span><br><span class="line"><span class="comment">// 由于字符串的不可变，在大量拼接字符串的时候会有效率问题</span></span><br></pre></td></tr></table></figure>

<h3 id="2-创建字符串对象"><a href="#2-创建字符串对象" class="headerlink" title="(2) 创建字符串对象"></a>(2) 创建字符串对象</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="keyword">new</span> <span class="built_in">String</span>(<span class="string">&quot;Hello World&quot;</span>);</span><br><span class="line"><span class="comment">// 获取字符串中字符的个数</span></span><br><span class="line"><span class="built_in">console</span>.log(str.length);</span><br></pre></td></tr></table></figure>

<h3 id="3-字符串对象的常用方法"><a href="#3-字符串对象的常用方法" class="headerlink" title="(3) 字符串对象的常用方法"></a>(3) 字符串对象的常用方法</h3><p>字符串所有的方法，都不会修改字符串本身(字符串是不可变的)，操作完成会返回一个新的字符串</p>
<h4 id="1-字符方法"><a href="#1-字符方法" class="headerlink" title="1. 字符方法"></a>1. 字符方法</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">charAt(); <span class="comment">//获取指定位置处字符</span></span><br><span class="line">charCodeAt(); <span class="comment">//获取指定位置处字符的 ASCII 码</span></span><br><span class="line">str[<span class="number">0</span>]; <span class="comment">//HTML5，IE8+支持 和 charAt()等效</span></span><br></pre></td></tr></table></figure>

<h4 id="2-字符串操作方法"><a href="#2-字符串操作方法" class="headerlink" title="2. 字符串操作方法"></a>2. 字符串操作方法</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">concat()   <span class="comment">//拼接字符串，等效于+，+更常用</span></span><br><span class="line">slice(start,end)   <span class="comment">//从 start 位置开始，截取到 end 位置，end 取不到</span></span><br><span class="line">substring(start,end) <span class="comment">//从 start 位置开始，截取到 end 位置，end 取不到</span></span><br><span class="line">substr(start,length)   <span class="comment">//// 从 start 位置开始，截取 length 个字符</span></span><br><span class="line">indexOf()   <span class="comment">//返回指定内容在元字符串中的位置,,如果没有，返回-1；(从前往后，检索到第一个就结束)</span></span><br><span class="line">lastIndexOf() <span class="comment">//返回指定内容在元字符串中的位置,,如果没有，返回-1；(从后往前，检索到第一个就结束)</span></span><br><span class="line">trim() <span class="comment">//只能去除字符串前后的空白</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 大小写转换方法</span></span><br><span class="line">toUpperCase() <span class="comment">//转换大写</span></span><br><span class="line">toLowerCase() <span class="comment">//转换小写</span></span><br><span class="line">search()<span class="comment">//方法用于检索字符串中指定的子字符串，返回子字符串的起始位置</span></span><br><span class="line">replace(old,<span class="keyword">new</span>) <span class="comment">//替换字符串替换字符串 new 替换 old</span></span><br><span class="line">split() <span class="comment">//分割字符串 返回的是一个数组。。数组的元素就是以参数的分割的</span></span><br></pre></td></tr></table></figure>

<p><strong>演示</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">&quot;uy weiu ryqi w-u-q-wey82374192739    &quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(str.charAt(<span class="number">0</span>)); <span class="comment">// //获取指定位置处字符</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(str.charCodeAt(<span class="number">0</span>)); <span class="comment">//获取指定位置处字符的ASCII码</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(str[<span class="number">0</span>]); <span class="comment">//HTML5，IE8+支持 和charAt()等效</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> str2 = <span class="string">&quot;&quot;</span>;</span><br><span class="line">str2 = str.concat(str); <span class="comment">//拼接字符串，等效于+，+更常用</span></span><br><span class="line"><span class="built_in">console</span>.log(str2);</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(str.slice(<span class="number">0</span>, <span class="number">1</span>)); <span class="comment">//从start位置开始，截取到end位置，end取不到</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(str.slice(<span class="number">2</span>, <span class="number">4</span>));</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(str.substring(<span class="number">2</span>, <span class="number">4</span>)); <span class="comment">//从start位置开始，截取到end位置，end取不到</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(str.substr(<span class="number">2</span>, <span class="number">4</span>)); <span class="comment">// 从start位置开始，截取 length 个字符</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(str.indexOf(<span class="string">&quot;u&quot;</span>)); <span class="comment">//返回指定内容在元字符串中的位置,,如果没有，返回-1；(从前往后，检索到第一个就结束)</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(str.lastIndexOf(<span class="string">&quot;u&quot;</span>)); <span class="comment">//返回指定内容在元字符串中的位置,,如果没有，返回-1；(从后往前，检索到第一个就结束)</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(str.trim()); <span class="comment">//只能去除字符串前后的空白</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 大小写转换方法</span></span><br><span class="line"><span class="built_in">console</span>.log(str.charAt(<span class="number">0</span>).toUpperCase()); <span class="comment">//转换大写</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(str.charAt(<span class="number">0</span>).toLowerCase()); <span class="comment">//转换小写</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(str.search(<span class="string">&quot;u&quot;</span>)); <span class="comment">//方法用于检索字符串中指定的子字符串，返回子字符串的起始位置</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(str.replace(<span class="string">&quot;u&quot;</span>, <span class="string">&quot;new&quot;</span>)); <span class="comment">//替换字符串替换字符串 new替换old</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(str.split()); <span class="comment">//分割字符串 返回的是一个数组。。数组的元素就是以参数的分割的</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(str.split(<span class="string">&quot;&quot;</span>));</span><br><span class="line"><span class="built_in">console</span>.log(str.split(<span class="string">&quot; &quot;</span>));</span><br><span class="line"><span class="built_in">console</span>.log(str.split(<span class="string">&quot;-&quot;</span>));</span><br></pre></td></tr></table></figure>

<p><strong>作业</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//   -------------------------</span></span><br><span class="line"><span class="comment">// Wechat收购 Baidu，电话号码相同的人当作是同一个人，合并后salary相加，其他属性保留Wechat的数据，新的Baidu的员工重新生成id,salary涨幅20%</span></span><br><span class="line"><span class="comment">// 统计收购后的员工平均工资，最高工资，最低工资，male的平均工资，female的平均工资</span></span><br><span class="line"><span class="comment">// 找出收购后工资高于8000的员工姓名和电话号码，按薪水从高到低排序</span></span><br><span class="line"><span class="comment">// 找出收购前后工资涨幅最高的员工姓名和电话号码，以及涨幅的百分比</span></span><br><span class="line"><span class="comment">// 找出收购后重名最多的三个姓名，统一出他们的平均年龄</span></span><br><span class="line"><span class="keyword">var</span> BaiduUsers = [],</span><br><span class="line">  WechatUsers = [];</span><br><span class="line"><span class="keyword">var</span> User = <span class="function"><span class="keyword">function</span> (<span class="params">id, name, phone, gender, age, salary</span>) </span>&#123;</span><br><span class="line">  <span class="built_in">this</span>.id = id;</span><br><span class="line">  <span class="built_in">this</span>.name = name;</span><br><span class="line">  <span class="built_in">this</span>.phone = phone;</span><br><span class="line">  <span class="built_in">this</span>.gender = gender;</span><br><span class="line">  <span class="built_in">this</span>.age = age;</span><br><span class="line">  <span class="built_in">this</span>.salary = salary;</span><br><span class="line">&#125;;</span><br><span class="line">User.create = <span class="function"><span class="keyword">function</span> (<span class="params">id, name, phone, gender, age, salary</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> User(id, name, phone, gender, age, salary);</span><br><span class="line">&#125;;</span><br><span class="line">BaiduUsers.push(User.create(<span class="number">1</span>, <span class="string">&quot;tommy&quot;</span>, <span class="string">&quot;1111&quot;</span>, <span class="string">&quot;male&quot;</span>, <span class="number">18</span>, <span class="number">10000</span>));</span><br><span class="line">BaiduUsers.push(User.create(<span class="number">2</span>, <span class="string">&quot;jerry&quot;</span>, <span class="string">&quot;2222&quot;</span>, <span class="string">&quot;male&quot;</span>, <span class="number">28</span>, <span class="number">10000</span>));</span><br><span class="line">BaiduUsers.push(User.create(<span class="number">3</span>, <span class="string">&quot;raobin&quot;</span>, <span class="string">&quot;3333&quot;</span>, <span class="string">&quot;female&quot;</span>, <span class="number">14</span>, <span class="number">1200</span>));</span><br><span class="line">BaiduUsers.push(User.create(<span class="number">4</span>, <span class="string">&quot;binbin&quot;</span>, <span class="string">&quot;4444&quot;</span>, <span class="string">&quot;male&quot;</span>, <span class="number">23</span>, <span class="number">9800</span>));</span><br><span class="line">BaiduUsers.push(User.create(<span class="number">5</span>, <span class="string">&quot;arthur&quot;</span>, <span class="string">&quot;5555&quot;</span>, <span class="string">&quot;female&quot;</span>, <span class="number">22</span>, <span class="number">10000</span>));</span><br><span class="line"><span class="comment">//</span></span><br><span class="line">WechatUsers.push(User.create(<span class="number">1</span>, <span class="string">&quot;tommy&quot;</span>, <span class="string">&quot;1111&quot;</span>, <span class="string">&quot;male&quot;</span>, <span class="number">20</span>, <span class="number">40000</span>));</span><br><span class="line">WechatUsers.push(User.create(<span class="number">2</span>, <span class="string">&quot;allen&quot;</span>, <span class="string">&quot;6666&quot;</span>, <span class="string">&quot;male&quot;</span>, <span class="number">34</span>, <span class="number">15800</span>));</span><br><span class="line">WechatUsers.push(User.create(<span class="number">3</span>, <span class="string">&quot;raobin&quot;</span>, <span class="string">&quot;3333&quot;</span>, <span class="string">&quot;female&quot;</span>, <span class="number">16</span>, <span class="number">2300</span>));</span><br><span class="line">WechatUsers.push(User.create(<span class="number">4</span>, <span class="string">&quot;harvey&quot;</span>, <span class="string">&quot;7777&quot;</span>, <span class="string">&quot;male&quot;</span>, <span class="number">30</span>, <span class="number">29800</span>));</span><br><span class="line">WechatUsers.push(User.create(<span class="number">5</span>, <span class="string">&quot;yuyu&quot;</span>, <span class="string">&quot;8888&quot;</span>, <span class="string">&quot;female&quot;</span>, <span class="number">27</span>, <span class="number">7000</span>));</span><br><span class="line"></span><br><span class="line"><span class="comment">// 电话号码相同的人当作是同一个人，合并后salary相加，其他属性保留Wechat的数据</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> b = <span class="number">0</span>; b &lt; BaiduUsers.length; b++) &#123;</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">var</span> w = <span class="number">0</span>; w &lt; WechatUsers.length; w++) &#123;</span><br><span class="line">    <span class="keyword">if</span> (BaiduUsers[b].phone == WechatUsers[w].phone) &#123;</span><br><span class="line">      WechatUsers[w].oldsalary = WechatUsers[w].salary;</span><br><span class="line">      WechatUsers[w].salary = WechatUsers[w].oldsalary + BaiduUsers[b].salary;</span><br><span class="line">      BaiduUsers.splice(b, <span class="number">1</span>);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 新的Baidu的员工重新生成id,salary涨幅20%</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; BaiduUsers.length; i++) &#123;</span><br><span class="line">  BaiduUsers[i].oldsalary = BaiduUsers[i].salary;</span><br><span class="line">  BaiduUsers[i].salary = BaiduUsers[i].salary * <span class="number">1.2</span>;</span><br><span class="line">  BaiduUsers[i].id = WechatUsers.length + <span class="number">1</span> + i;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 所有 weChat 员工</span></span><br><span class="line">newWechatUsers = WechatUsers.concat(BaiduUsers);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 统计收购后的员工平均工资，最高工资，最低工资，male的平均工资，female的平均工资</span></span><br><span class="line"><span class="keyword">var</span> sumSalary = <span class="number">0</span>, <span class="comment">// 所有员工薪资和</span></span><br><span class="line">  usersSalary = [], <span class="comment">// 所有员工薪资</span></span><br><span class="line">  averageSalary = <span class="number">0</span>, <span class="comment">// 平均薪资</span></span><br><span class="line">  max = <span class="number">0</span>, <span class="comment">// 最高薪资</span></span><br><span class="line">  min = <span class="number">0</span>, <span class="comment">// 最低薪资</span></span><br><span class="line">  maleSalary = [], <span class="comment">// 男员工薪资集合</span></span><br><span class="line">  femaleSalary = [], <span class="comment">// 女员工薪资集合</span></span><br><span class="line">  sumMaleSalary = <span class="number">0</span>,</span><br><span class="line">  sumFemaleSalary = <span class="number">0</span>;</span><br><span class="line">newWechatUsers.forEach(<span class="function"><span class="keyword">function</span> (<span class="params">user, userIndex</span>) </span>&#123;</span><br><span class="line">  <span class="comment">// 把所有员工薪资放到一个新数组里</span></span><br><span class="line">  usersSalary.push(newWechatUsers[userIndex].salary);</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 把所有男员工薪资放到一个新数组里</span></span><br><span class="line">  <span class="keyword">if</span> (user.gender == <span class="string">&quot;male&quot;</span>) &#123;</span><br><span class="line">    maleSalary.push(newWechatUsers[userIndex].salary);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 把所有女员工薪资放到一个新数组里</span></span><br><span class="line">  <span class="keyword">if</span> (user.gender == <span class="string">&quot;female&quot;</span>) &#123;</span><br><span class="line">    femaleSalary.push(newWechatUsers[userIndex].salary);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 所有员工的薪资</span></span><br><span class="line">usersSalary.forEach(<span class="function"><span class="keyword">function</span> (<span class="params">userSalary</span>) </span>&#123;</span><br><span class="line">  sumSalary += userSalary;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 平均薪资</span></span><br><span class="line">averageSalary = sumSalary / newWechatUsers.length;</span><br><span class="line"><span class="built_in">console</span>.log(averageSalary);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 最高工资，最低工资</span></span><br><span class="line">max = usersSalary[<span class="number">0</span>];</span><br><span class="line">min = usersSalary[<span class="number">0</span>];</span><br><span class="line">usersSalary.forEach(<span class="function"><span class="keyword">function</span> (<span class="params">value</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">if</span> (max &lt; value) &#123;</span><br><span class="line">    max = value;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">if</span> (min &gt; value) &#123;</span><br><span class="line">    min = value;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br><span class="line"><span class="built_in">console</span>.log(max, min);</span><br><span class="line"></span><br><span class="line"><span class="comment">// male的平均工资</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; maleSalary.length; i++) &#123;</span><br><span class="line">  sumMaleSalary += maleSalary[i];</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(sumMaleSalary / maleSalary.length);</span><br><span class="line"></span><br><span class="line"><span class="comment">// female的平均工资</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; femaleSalary.length; i++) &#123;</span><br><span class="line">  sumFemaleSalary += femaleSalary[i];</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(sumFemaleSalary / femaleSalary.length);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 找出收购后工资高于8000的员工姓名和电话号码，按薪水从高到低排序</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 先把整体重新排序</span></span><br><span class="line">newWechatUsers.sort(<span class="function"><span class="keyword">function</span> (<span class="params">a, b</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> b[<span class="string">&quot;salary&quot;</span>] - a[<span class="string">&quot;salary&quot;</span>];</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> more8000 = [];</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">UserList</span>(<span class="params">name, phone</span>) </span>&#123;</span><br><span class="line">  <span class="built_in">this</span>.name = name;</span><br><span class="line">  <span class="built_in">this</span>.phone = phone;</span><br><span class="line">  <span class="keyword">return</span> &#123; name, phone &#125;;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; newWechatUsers.length; i++) &#123;</span><br><span class="line">  <span class="keyword">if</span> (newWechatUsers[i].salary &gt; <span class="number">8000</span>) &#123;</span><br><span class="line">    more8000.push(UserList(newWechatUsers[i].name, newWechatUsers[i].phone));</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 找出收购前后工资涨幅最高的员工姓名和电话号码，以及涨幅的百分比</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; newWechatUsers.length; i++) &#123;</span><br><span class="line">  <span class="keyword">if</span> (newWechatUsers[i].oldsalary != <span class="literal">undefined</span>) &#123;</span><br><span class="line">    newWechatUsers[i].riseSalary =</span><br><span class="line">      newWechatUsers[i].salary - newWechatUsers[i].oldsalary;</span><br><span class="line">    newWechatUsers[i].percentRise =</span><br><span class="line">      (newWechatUsers[i].riseSalary / newWechatUsers[i].oldsalary) * <span class="number">100</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">// 因为有的员工薪资没有合并，也没有涨薪，所以 oldsalary 会是 undefined</span></span><br><span class="line">  <span class="keyword">else</span> &#123;</span><br><span class="line">    newWechatUsers.splice(i, <span class="number">1</span>);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">newWechatUsers.sort(<span class="function"><span class="keyword">function</span> (<span class="params">a, b</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> b[<span class="string">&quot;percentRise&quot;</span>] - a[<span class="string">&quot;percentRise&quot;</span>];</span><br><span class="line">&#125;);</span><br><span class="line"><span class="built_in">console</span>.log(</span><br><span class="line">  newWechatUsers[<span class="number">0</span>].name,</span><br><span class="line">  newWechatUsers[<span class="number">0</span>].phone,</span><br><span class="line">  <span class="string">&quot;涨幅百分比 :&quot;</span> + newWechatUsers[<span class="number">0</span>].percentRise + <span class="string">&quot;%&quot;</span></span><br><span class="line">);</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&quot;-------------------------------------&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> str = <span class="string">&quot;abaasdffggghhjjkkgfddsssss3444343&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 1、 字符串的长度</span></span><br><span class="line"><span class="built_in">console</span>.log(str.length);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 2、 取出指定位置的字符，如：0,3,5,9等</span></span><br><span class="line"><span class="built_in">console</span>.log(str.slice(<span class="number">0</span>, <span class="number">1</span>));</span><br><span class="line"><span class="built_in">console</span>.log(str.slice(<span class="number">2</span>, <span class="number">3</span>));</span><br><span class="line"><span class="built_in">console</span>.log(str.slice(<span class="number">4</span>, <span class="number">5</span>));</span><br><span class="line"><span class="built_in">console</span>.log(str.slice(<span class="number">8</span>, <span class="number">9</span>));</span><br><span class="line"></span><br><span class="line"><span class="comment">// 3、 查找指定字符是否在以上字符串中存在，如：i，c ，b等</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">searchStr</span>(<span class="params">string, element</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">if</span> (string.search(element) == -<span class="number">1</span>) &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&quot;没找到&quot;</span>);</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&quot;存在&quot;</span>);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">searchStr(str, <span class="string">&quot;i&quot;</span>);</span><br><span class="line">searchStr(str, <span class="string">&quot;c&quot;</span>);</span><br><span class="line">searchStr(str, <span class="string">&quot;b&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 4、 替换指定的字符，如：g替换为22,ss替换为b等操作方法</span></span><br><span class="line"><span class="keyword">var</span> str2 = str;</span><br><span class="line"><span class="keyword">do</span> &#123;</span><br><span class="line">  str2 = str2.replace(<span class="string">&quot;g&quot;</span>, <span class="number">22</span>);</span><br><span class="line">&#125; <span class="keyword">while</span> (str2.search(<span class="string">&quot;g&quot;</span>) != -<span class="number">1</span>);</span><br><span class="line"><span class="built_in">console</span>.log(str2);</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> str3 = str;</span><br><span class="line"><span class="keyword">do</span> &#123;</span><br><span class="line">  str3 = str3.replace(<span class="string">&quot;ss&quot;</span>, <span class="string">&quot;b&quot;</span>);</span><br><span class="line">&#125; <span class="keyword">while</span> (str3.search(<span class="string">&quot;ss&quot;</span>) != -<span class="number">1</span>);</span><br><span class="line"><span class="built_in">console</span>.log(str3);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 5、 截取指定开始位置到结束位置的字符串，如：取得1-5的字符串</span></span><br><span class="line"><span class="built_in">console</span>.log(str.substring(<span class="number">0</span>, <span class="number">5</span>));</span><br><span class="line"></span><br><span class="line"><span class="comment">// 6、 找出以上字符串中出现次数最多的字符和出现的次数</span></span><br><span class="line"><span class="keyword">var</span> obj = &#123;&#125;,</span><br><span class="line">  count = <span class="number">0</span>,</span><br><span class="line">  s = <span class="string">&quot;&quot;</span>;</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; str.split(<span class="string">&quot;&quot;</span>).length; i++) &#123;</span><br><span class="line">  <span class="comment">// 如果不存在,记录一次</span></span><br><span class="line">  <span class="keyword">if</span> (!obj[str.charAt(i)]) &#123;</span><br><span class="line">    obj[str.charAt(i)] = <span class="number">1</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">// 如果存在，则 +1</span></span><br><span class="line">  <span class="keyword">else</span> &#123;</span><br><span class="line">    obj[str.charAt(i)]++;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> key <span class="keyword">in</span> obj) &#123;</span><br><span class="line">  <span class="keyword">if</span> (obj[key] &gt; count) &#123;</span><br><span class="line">    count = obj[key];</span><br><span class="line">    s = key;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&quot;出现次数最多的字符 : &quot;</span> + s + <span class="string">&quot; ; &quot;</span> + <span class="string">&quot;次数 : &quot;</span> + count);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 7、 遍历字符串，并将遍历出的字符两头添加符号“@”输出至当前的文档页面</span></span><br><span class="line">str.split(<span class="string">&quot;&quot;</span>).forEach(<span class="function"><span class="keyword">function</span> (<span class="params">value, index</span>) </span>&#123;</span><br><span class="line">  <span class="built_in">document</span>.write(<span class="string">&quot;@&quot;</span> + value + <span class="string">&quot;@&quot;</span>);</span><br><span class="line">  <span class="built_in">document</span>.write(<span class="string">&quot;&lt;br /&gt;&quot;</span>);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<h1 id="The-End"><a href="#The-End" class="headerlink" title="The_End"></a>The_End</h1></article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="mailto:undefined">HHR</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://codehhr.cn/2021/05/13/js/js/">https://codehhr.cn/2021/05/13/js/js/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://codehhr.cn" target="_blank">Saturday_</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/js/">js</a><a class="post-meta__tags" href="/tags/javascript/">javascript</a><a class="post-meta__tags" href="/tags/%E5%9F%BA%E7%A1%80%E6%80%BB%E7%BB%93/">基础总结</a></div><div class="post_share"><div class="social-share" data-image="https://codehhr.coding.net/p/codehhr/d/images/git/raw/master/js/js.jpeg" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-share.js/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/social-share.js/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/2021/05/19/js/js-api/"><img class="prev-cover" src= "" data-lazy-src="https://pic.mac89.com/pic/202207/02163019_b21acaafef.jpeg" onerror="onerror=null;src='https://pic.mac89.com/pic/202207/02163019_b21acaafef.jpeg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">Js API</div></div></a></div><div class="next-post pull-right"><a href="/2021/04/28/linux/linux-nvidia/"><img class="next-cover" src= "" data-lazy-src="https://codehhr.coding.net/p/codehhr/d/images/git/raw/master/i3/archscreenshotcmin.png" onerror="onerror=null;src='https://pic.mac89.com/pic/202207/02163019_b21acaafef.jpeg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">ArchLinux 双显卡方案</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span> 相关推荐</span></div><div class="relatedPosts-list"><div><a href="/2021/06/19/js/es6-day01/" title="ES6 新增用法 ( 一 )"><img class="cover" src= "" data-lazy-src="https://pic.mac89.com/pic/202207/02163019_b21acaafef.jpeg" alt="cover"><div class="content is-center"><div class="date"><i class="fas fa-history fa-fw"></i> 2021-06-29</div><div class="title">ES6 新增用法 ( 一 )</div></div></a></div><div><a href="/2021/06/20/js/es6-day02/" title="ES6 新增用法 ( 二 )"><img class="cover" src= "" data-lazy-src="https://pic.mac89.com/pic/202207/02163019_b21acaafef.jpeg" alt="cover"><div class="content is-center"><div class="date"><i class="fas fa-history fa-fw"></i> 2021-06-25</div><div class="title">ES6 新增用法 ( 二 )</div></div></a></div><div><a href="/2021/06/23/js/es6-day03/" title="ES6 新增用法 ( 三 )"><img class="cover" src= "" data-lazy-src="https://codehhr.coding.net/p/codehhr/d/wallpaper/git/raw/master/desktop.png" alt="cover"><div class="content is-center"><div class="date"><i class="fas fa-history fa-fw"></i> 2021-06-24</div><div class="title">ES6 新增用法 ( 三 )</div></div></a></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src= "" data-lazy-src="https://pic.mac89.com/pic/202207/02163019_b21acaafef.jpeg" onerror="this.onerror=null;this.src='https://pic.mac89.com/pic/202207/02163019_b21acaafef.jpeg'" alt="avatar"/></div><div class="author-info__name">HHR</div><div class="author-info__description">Linux is great ~</div></div><div class="card-info-data"><div class="card-info-data-item is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">87</div></a></div><div class="card-info-data-item is-center"><a href="/tags/"><div class="headline">标签</div><div class="length-num">120</div></a></div><div class="card-info-data-item is-center"><a href="/categories/"><div class="headline">分类</div><div class="length-num">31</div></a></div></div><a class="button--animated" id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/codehhr"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/codehhr" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="mailto:1871973389@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a><a class="social-icon" href="/atom.xml" target="_blank" title="RSS"><i class="fas fa-rss"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn card-announcement-animation"></i><span>公告</span></div><div class="announcement_content">评论关了, 图床也挂了</div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E4%B8%80-JavaScript-%E4%BB%8B%E7%BB%8D"><span class="toc-number">1.</span> <span class="toc-text">一. JavaScript 介绍</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-%E3%80%81JavaScript-%E6%98%AF%E4%BB%80%E4%B9%88"><span class="toc-number">1.1.</span> <span class="toc-text">(1) 、JavaScript 是什么</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-JavaScript-%E7%9A%84%E5%8E%86%E5%8F%B2"><span class="toc-number">1.1.1.</span> <span class="toc-text">1. JavaScript 的历史</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-JavaScript-%E6%98%AF%E4%BB%80%E4%B9%88%E8%AF%AD%E8%A8%80"><span class="toc-number">1.1.2.</span> <span class="toc-text">2. JavaScript 是什么语言</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-JavaScript-%E7%9A%84%E5%8F%91%E5%B1%95%E5%92%8C%E6%84%8F%E4%B9%89"><span class="toc-number">1.1.3.</span> <span class="toc-text">3. JavaScript 的发展和意义</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-JavaScript-%E5%92%8C-HTML%E3%80%81CSS-%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-number">1.1.4.</span> <span class="toc-text">4. JavaScript 和 HTML、CSS 的区别</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-JavaScript-%E7%9A%84%E7%BB%84%E6%88%90"><span class="toc-number">1.1.5.</span> <span class="toc-text">5. JavaScript 的组成</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%EF%BC%881%EF%BC%89ECMAScript-JavaScript-%E7%9A%84%E6%A0%B8%E5%BF%83"><span class="toc-number">1.1.5.1.</span> <span class="toc-text">（1）ECMAScript - JavaScript 的核心</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%EF%BC%882%EF%BC%89BOM-%E6%B5%8F%E8%A7%88%E5%99%A8%E5%AF%B9%E8%B1%A1%E6%A8%A1%E5%9E%8B"><span class="toc-number">1.1.5.2.</span> <span class="toc-text">（2）BOM - 浏览器对象模型</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%EF%BC%883%EF%BC%89DOM-%E6%96%87%E6%A1%A3%E5%AF%B9%E8%B1%A1%E6%A8%A1%E5%9E%8B"><span class="toc-number">1.1.5.3.</span> <span class="toc-text">（3）DOM - 文档对象模型</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-JavaScript-%E4%BB%A3%E7%A0%81%E5%86%99%E6%B3%95"><span class="toc-number">1.2.</span> <span class="toc-text">(2) JavaScript 代码写法</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#3-JavaScript-%E9%97%AE%E9%A2%98%E6%80%BB%E7%BB%93"><span class="toc-number">1.2.1.</span> <span class="toc-text">(3) JavaScript 问题总结</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-%E6%B3%A8%E9%87%8A"><span class="toc-number">1.2.2.</span> <span class="toc-text">(4) 注释</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E4%BA%8C-JavaScript-%E5%8F%98%E9%87%8F"><span class="toc-number">2.</span> <span class="toc-text">二. JavaScript 变量</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-%E5%8F%98%E9%87%8F%E5%BC%95%E5%85%A5"><span class="toc-number">2.1.</span> <span class="toc-text">(1) 变量引入</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-%E5%8F%98%E9%87%8F%E5%A3%B0%E6%98%8E%E5%92%8C%E5%88%9D%E5%A7%8B%E5%8C%96"><span class="toc-number">2.2.</span> <span class="toc-text">(2) 变量声明和初始化</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-%E5%8F%98%E9%87%8F%E7%9A%84%E5%91%BD%E5%90%8D%E8%A7%84%E5%88%99%E5%92%8C%E8%A7%84%E8%8C%83"><span class="toc-number">2.3.</span> <span class="toc-text">(3) 变量的命名规则和规范</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-%E5%AD%97%E9%9D%A2%E9%87%8F"><span class="toc-number">2.4.</span> <span class="toc-text">(4) 字面量</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E4%B8%89-JavaScript-%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B"><span class="toc-number">3.</span> <span class="toc-text">三. JavaScript 数据类型</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-%E5%9F%BA%E6%9C%AC%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B"><span class="toc-number">3.1.</span> <span class="toc-text">(1) 基本数据类型</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-Number-%E7%B1%BB%E5%9E%8B"><span class="toc-number">3.1.1.</span> <span class="toc-text">1. Number 类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%95%B0%E5%80%BC%E5%88%A4%E6%96%AD"><span class="toc-number">3.1.2.</span> <span class="toc-text">数值判断</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2%E3%80%81String-%E7%B1%BB%E5%9E%8B"><span class="toc-number">3.1.3.</span> <span class="toc-text">2、String 类型</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%BD%AC%E4%B9%89%E7%AC%A6"><span class="toc-number">3.1.3.1.</span> <span class="toc-text">转义符</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%AD%97%E7%AC%A6%E4%B8%B2%E9%95%BF%E5%BA%A6"><span class="toc-number">3.1.3.2.</span> <span class="toc-text">字符串长度</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%8B%BC%E6%8E%A5"><span class="toc-number">3.1.3.3.</span> <span class="toc-text">字符串拼接</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-Boolean-%E7%B1%BB%E5%9E%8B"><span class="toc-number">3.1.4.</span> <span class="toc-text">3. Boolean 类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-Undefined-%E5%92%8C-Null"><span class="toc-number">3.1.5.</span> <span class="toc-text">4. Undefined 和 Null</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-%E5%A4%8D%E6%9D%82%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B"><span class="toc-number">3.2.</span> <span class="toc-text">(2) 复杂数据类型</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B%E8%BD%AC%E6%8D%A2"><span class="toc-number">3.3.</span> <span class="toc-text">(3) 数据类型转换</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#typeof-%E5%85%B3%E9%94%AE%E5%AD%97"><span class="toc-number">3.3.1.</span> <span class="toc-text">typeof 关键字</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#toString-NaN"><span class="toc-number">3.3.2.</span> <span class="toc-text">toString()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#String"><span class="toc-number">3.3.3.</span> <span class="toc-text">String()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%8B%BC%E6%8E%A5%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%96%B9%E5%BC%8F"><span class="toc-number">3.3.4.</span> <span class="toc-text">拼接字符串方式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%BD%AC%E6%8D%A2%E6%88%90%E6%95%B0%E5%80%BC%E7%B1%BB%E5%9E%8B"><span class="toc-number">3.3.5.</span> <span class="toc-text">转换成数值类型</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#parseInt"><span class="toc-number">3.3.5.1.</span> <span class="toc-text">parseInt()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#parseFloat"><span class="toc-number">3.3.5.2.</span> <span class="toc-text">parseFloat()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%AD%A3%E8%B4%9F%E8%BF%90%E7%AE%97"><span class="toc-number">3.3.5.3.</span> <span class="toc-text">正负运算</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%BD%AC%E6%8D%A2%E6%88%90%E5%B8%83%E5%B0%94%E7%B1%BB%E5%9E%8B"><span class="toc-number">3.3.6.</span> <span class="toc-text">转换成布尔类型</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%9B%9B-JavaScript-%E8%BF%90%E7%AE%97"><span class="toc-number">4.</span> <span class="toc-text">四. JavaScript 运算</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-%E7%AE%97%E6%9C%AF%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="toc-number">4.1.</span> <span class="toc-text">(1) 算术运算符</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-%E4%B8%80%E5%85%83%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="toc-number">4.2.</span> <span class="toc-text">(2) 一元运算符</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-%E9%80%BB%E8%BE%91%E8%BF%90%E7%AE%97%E7%AC%A6-%E5%B8%83%E5%B0%94%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="toc-number">4.3.</span> <span class="toc-text">(3) 逻辑运算符 (布尔运算符)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-%E5%85%B3%E7%B3%BB%E8%BF%90%E7%AE%97%E7%AC%A6-%E6%AF%94%E8%BE%83%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="toc-number">4.4.</span> <span class="toc-text">(4) 关系运算符(比较运算符)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#5-%E8%B5%8B%E5%80%BC%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="toc-number">4.5.</span> <span class="toc-text">(5) 赋值运算符</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-%E8%BF%90%E7%AE%97%E7%AC%A6%E7%9A%84%E4%BC%98%E5%85%88%E7%BA%A7"><span class="toc-number">4.6.</span> <span class="toc-text">(6) 运算符的优先级</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%BF%90%E7%AE%97%E4%BC%98%E5%85%88%E7%BA%A7%E7%BB%83%E4%B9%A0"><span class="toc-number">4.7.</span> <span class="toc-text">运算优先级练习</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E4%BA%94-%E6%B5%81%E7%A8%8B%E6%8E%A7%E5%88%B6"><span class="toc-number">5.</span> <span class="toc-text">五. 流程控制</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-%E5%88%86%E6%94%AF%E7%BB%93%E6%9E%84"><span class="toc-number">5.1.</span> <span class="toc-text">1. 分支结构</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-if-%E8%AF%AD%E5%8F%A5"><span class="toc-number">5.1.1.</span> <span class="toc-text">(1) if 语句</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E4%B8%89%E5%85%83%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="toc-number">5.1.2.</span> <span class="toc-text">(2) 三元运算符</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-switch-%E8%AF%AD%E5%8F%A5"><span class="toc-number">5.1.3.</span> <span class="toc-text">(3) switch 语句</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-%E5%BE%AA%E7%8E%AF%E7%BB%93%E6%9E%84"><span class="toc-number">5.2.</span> <span class="toc-text">2. 循环结构</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-while-%E8%AF%AD%E5%8F%A5"><span class="toc-number">5.2.1.</span> <span class="toc-text">(1) while 语句</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-do%E2%80%A6while-%E8%AF%AD%E5%8F%A5"><span class="toc-number">5.2.2.</span> <span class="toc-text">(2) do…while 语句</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-for-%E8%AF%AD%E5%8F%A5"><span class="toc-number">5.2.3.</span> <span class="toc-text">(3) for 语句</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-continue-%E5%92%8C-break"><span class="toc-number">5.2.4.</span> <span class="toc-text">(4) continue 和 break</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-%E5%BE%AA%E7%8E%AF%E8%AF%AD%E5%8F%A5%E5%8C%BA%E5%88%AB"><span class="toc-number">5.2.5.</span> <span class="toc-text">(5) 循环语句区别</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-%E5%BE%AA%E7%8E%AF%E7%BB%93%E6%9E%84%E7%9A%84%E8%A1%A8%E8%BE%BE%E5%BC%8F%E4%B8%8D%E5%90%8C"><span class="toc-number">5.2.5.1.</span> <span class="toc-text">1. 循环结构的表达式不同</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-%E6%89%A7%E8%A1%8C%E6%97%B6%E5%88%A4%E6%96%AD%E6%96%B9%E5%BC%8F%E4%B8%8D%E5%90%8C"><span class="toc-number">5.2.5.2.</span> <span class="toc-text">2. 执行时判断方式不同</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-%E6%89%A7%E8%A1%8C%E6%AC%A1%E6%95%B0%E4%B8%8D%E5%90%8C"><span class="toc-number">5.2.5.3.</span> <span class="toc-text">3. 执行次数不同</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-%E6%89%A7%E8%A1%8C%E6%9C%AB%E5%B0%BE%E5%BE%AA%E7%8E%AF%E4%BD%93%E7%9A%84%E9%A1%BA%E5%BA%8F%E4%B8%8D%E5%90%8C"><span class="toc-number">5.2.5.4.</span> <span class="toc-text">4. 执行末尾循环体的顺序不同</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BD%9C%E4%B8%9A"><span class="toc-number">5.3.</span> <span class="toc-text">作业</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-%E8%B0%83%E8%AF%95"><span class="toc-number">5.4.</span> <span class="toc-text">2. 调试</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-alert"><span class="toc-number">5.4.1.</span> <span class="toc-text">(1) alert()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-console-log"><span class="toc-number">5.4.2.</span> <span class="toc-text">(2) console.log()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-debugger-%E5%85%B3%E9%94%AE%E5%AD%97"><span class="toc-number">5.4.3.</span> <span class="toc-text">(3) debugger 关键字</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-%E6%96%AD%E7%82%B9%E8%B0%83%E8%AF%95"><span class="toc-number">5.4.4.</span> <span class="toc-text">(4) 断点调试</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%85%AD-%E6%95%B0%E7%BB%84"><span class="toc-number">6.</span> <span class="toc-text">六. 数组</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-%E4%B8%BA%E4%BB%80%E4%B9%88%E8%A6%81%E5%AD%A6%E4%B9%A0%E6%95%B0%E7%BB%84"><span class="toc-number">6.1.</span> <span class="toc-text">(1) 为什么要学习数组</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-%E6%95%B0%E7%BB%84%E7%9A%84%E5%AE%9A%E4%B9%89"><span class="toc-number">6.2.</span> <span class="toc-text">(2) 数组的定义</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-%E9%80%9A%E8%BF%87%E6%95%B0%E7%BB%84%E5%AD%97%E9%9D%A2%E9%87%8F%E5%88%9B%E5%BB%BA%E6%95%B0%E7%BB%84"><span class="toc-number">6.3.</span> <span class="toc-text">(3) 通过数组字面量创建数组</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-%E8%8E%B7%E5%8F%96%E6%95%B0%E7%BB%84%E5%85%83%E7%B4%A0"><span class="toc-number">6.4.</span> <span class="toc-text">(4) 获取数组元素</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#5-%E9%81%8D%E5%8E%86%E6%95%B0%E7%BB%84"><span class="toc-number">6.5.</span> <span class="toc-text">(5) 遍历数组</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-%E6%95%B0%E7%BB%84%E4%B8%AD%E6%96%B0%E5%A2%9E%E5%85%83%E7%B4%A0"><span class="toc-number">6.6.</span> <span class="toc-text">(6) 数组中新增元素</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%95%B0%E7%BB%84%E7%BB%83%E4%B9%A0%E6%A1%88%E4%BE%8B"><span class="toc-number">6.7.</span> <span class="toc-text">数组练习案例</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E4%B8%83-%E5%87%BD%E6%95%B0"><span class="toc-number">7.</span> <span class="toc-text">七. 函数</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-%E4%B8%BA%E4%BB%80%E4%B9%88%E8%A6%81%E6%9C%89%E5%87%BD%E6%95%B0"><span class="toc-number">7.1.</span> <span class="toc-text">(1) 为什么要有函数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-%E4%BB%80%E4%B9%88%E6%98%AF%E5%87%BD%E6%95%B0"><span class="toc-number">7.2.</span> <span class="toc-text">(2) 什么是函数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-%E5%87%BD%E6%95%B0%E7%9A%84%E5%AE%9A%E4%B9%89"><span class="toc-number">7.3.</span> <span class="toc-text">(3) 函数的定义</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-%E5%87%BD%E6%95%B0%E7%9A%84%E8%B0%83%E7%94%A8"><span class="toc-number">7.4.</span> <span class="toc-text">(4) 函数的调用</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#5-%E5%87%BD%E6%95%B0%E7%9A%84%E5%8F%82%E6%95%B0"><span class="toc-number">7.5.</span> <span class="toc-text">(5) 函数的参数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-%E5%87%BD%E6%95%B0%E7%9A%84%E8%BF%94%E5%9B%9E%E5%80%BC"><span class="toc-number">7.6.</span> <span class="toc-text">(6) 函数的返回值</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%87%BD%E6%95%B0%E6%A1%88%E4%BE%8B"><span class="toc-number">7.7.</span> <span class="toc-text">函数案例</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BD%9C%E4%B8%9A-1"><span class="toc-number">7.8.</span> <span class="toc-text">作业</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%86%92%E6%B3%A1%E6%8E%92%E5%BA%8F"><span class="toc-number">7.9.</span> <span class="toc-text">冒泡排序</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%85%AB-%E9%A2%84%E8%A7%A3%E6%9E%90"><span class="toc-number">8.</span> <span class="toc-text">八. 预解析</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-%E5%87%BD%E6%95%B0%E6%8F%90%E5%8D%87"><span class="toc-number">8.1.</span> <span class="toc-text">(1) 函数提升</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-%E5%8F%98%E9%87%8F%E6%8F%90%E5%8D%87"><span class="toc-number">8.2.</span> <span class="toc-text">(2) 变量提升</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-%E5%87%BD%E6%95%B0%E5%90%8C%E5%90%8D"><span class="toc-number">8.3.</span> <span class="toc-text">(3) 函数同名</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-%E5%8F%98%E9%87%8F%E5%92%8C%E5%87%BD%E6%95%B0%E5%90%8C%E5%90%8D"><span class="toc-number">8.4.</span> <span class="toc-text">(4) 变量和函数同名</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%BB%83%E4%B9%A0"><span class="toc-number">8.5.</span> <span class="toc-text">练习</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#5-%E9%A2%84%E8%A7%A3%E6%9E%90%E6%98%AF%E5%88%86%E4%BD%9C%E7%94%A8%E5%9F%9F%E7%9A%84"><span class="toc-number">8.6.</span> <span class="toc-text">(5) 预解析是分作用域的</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-%E5%87%BD%E6%95%B0%E8%A1%A8%E8%BE%BE%E5%BC%8F%E4%B8%8D%E4%BC%9A%E6%8F%90%E5%8D%87"><span class="toc-number">8.7.</span> <span class="toc-text">(6) 函数表达式不会提升</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#7-%E4%BD%9C%E7%94%A8%E5%9F%9F"><span class="toc-number">8.8.</span> <span class="toc-text">(7)作用域</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E5%85%A8%E5%B1%80%E4%BD%9C%E7%94%A8%E5%9F%9F"><span class="toc-number">8.8.1.</span> <span class="toc-text">(1) 全局作用域</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E5%B1%80%E9%83%A8%E4%BD%9C%E7%94%A8%E5%9F%9F-%E5%87%BD%E6%95%B0%E4%BD%9C%E7%94%A8%E5%9F%9F"><span class="toc-number">8.8.2.</span> <span class="toc-text">(2) 局部作用域 ( 函数作用域 )</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-%E9%9A%90%E5%BC%8F%E5%85%A8%E5%B1%80%E5%8F%98%E9%87%8F"><span class="toc-number">8.8.3.</span> <span class="toc-text">(3) 隐式全局变量</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E4%B9%9D-%E5%AF%B9%E8%B1%A1"><span class="toc-number">9.</span> <span class="toc-text">九. 对象</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-%E4%B8%BA%E4%BB%80%E4%B9%88%E8%A6%81%E6%9C%89%E5%AF%B9%E8%B1%A1"><span class="toc-number">9.1.</span> <span class="toc-text">(1) 为什么要有对象</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-%E4%BB%80%E4%B9%88%E6%98%AF%E5%AF%B9%E8%B1%A1"><span class="toc-number">9.2.</span> <span class="toc-text">(2) 什么是对象</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-JavaScript-%E4%B8%AD%E7%9A%84%E5%AF%B9%E8%B1%A1"><span class="toc-number">9.3.</span> <span class="toc-text">(3) JavaScript 中的对象</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-%E5%AF%B9%E8%B1%A1%E5%88%9B%E5%BB%BA%E6%96%B9%E5%BC%8F"><span class="toc-number">9.4.</span> <span class="toc-text">(4) 对象创建方式</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E5%AF%B9%E8%B1%A1%E5%AD%97%E9%9D%A2%E9%87%8F"><span class="toc-number">9.4.1.</span> <span class="toc-text">1. 对象字面量</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-new-Object-%E5%88%9B%E5%BB%BA%E5%AF%B9%E8%B1%A1"><span class="toc-number">9.4.2.</span> <span class="toc-text">2. new Object()创建对象</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-%E5%B7%A5%E5%8E%82%E5%87%BD%E6%95%B0%E5%88%9B%E5%BB%BA%E5%AF%B9%E8%B1%A1"><span class="toc-number">9.4.3.</span> <span class="toc-text">3. 工厂函数创建对象</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-%E8%87%AA%E5%AE%9A%E4%B9%89%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0"><span class="toc-number">9.4.4.</span> <span class="toc-text">4. 自定义构造函数</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#5-%E5%B1%9E%E6%80%A7%E5%92%8C%E6%96%B9%E6%B3%95"><span class="toc-number">9.5.</span> <span class="toc-text">(5) 属性和方法</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-new-%E5%85%B3%E9%94%AE%E5%AD%97"><span class="toc-number">9.6.</span> <span class="toc-text">(6) new 关键字</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#7-this"><span class="toc-number">9.7.</span> <span class="toc-text">(7) this</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#8-%E5%AF%B9%E8%B1%A1%E7%9A%84%E4%BD%BF%E7%94%A8"><span class="toc-number">9.8.</span> <span class="toc-text">(8) 对象的使用</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%8D%81-JavaScript-%E9%94%99%E8%AF%AF"><span class="toc-number">10.</span> <span class="toc-text">十. JavaScript  错误</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-JavaScript-try-%E5%92%8C-catch"><span class="toc-number">10.1.</span> <span class="toc-text">(1) JavaScript try 和 catch</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-finally-%E8%AF%AD%E5%8F%A5"><span class="toc-number">10.2.</span> <span class="toc-text">(2) finally 语句</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-Throw-%E8%AF%AD%E5%8F%A5"><span class="toc-number">10.3.</span> <span class="toc-text">(3) Throw 语句</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BD%9C%E4%B8%9A-2"><span class="toc-number">10.4.</span> <span class="toc-text">作业</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%8D%81%E4%B8%80-js-%E5%86%85%E7%BD%AE%E5%AF%B9%E8%B1%A1"><span class="toc-number">11.</span> <span class="toc-text">十一. js 内置对象</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-%E5%86%85%E7%BD%AE%E5%AF%B9%E8%B1%A1"><span class="toc-number">11.1.</span> <span class="toc-text">1.内置对象</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-Math-%E5%AF%B9%E8%B1%A1"><span class="toc-number">11.2.</span> <span class="toc-text">2. Math 对象</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E5%B8%B8%E7%94%A8%E5%B1%9E%E6%80%A7"><span class="toc-number">11.2.1.</span> <span class="toc-text">(1) 常用属性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95"><span class="toc-number">11.2.2.</span> <span class="toc-text">(2) 常用方法</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-Date-%E5%AF%B9%E8%B1%A1"><span class="toc-number">11.3.</span> <span class="toc-text">3. Date 对象</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E5%88%9B%E5%BB%BA%E6%97%A5%E6%9C%9F%E5%AF%B9%E8%B1%A1"><span class="toc-number">11.3.1.</span> <span class="toc-text">(1) 创建日期对象</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E6%97%A5%E6%9C%9F%E5%8E%9F%E5%A7%8B%E5%80%BC"><span class="toc-number">11.3.2.</span> <span class="toc-text">(2) 日期原始值</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-%E8%8E%B7%E5%8F%96%E6%97%A5%E6%9C%9F%E6%8C%87%E5%AE%9A%E9%83%A8%E5%88%86"><span class="toc-number">11.3.3.</span> <span class="toc-text">(3) 获取日期指定部分</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-Array-%E5%AF%B9%E8%B1%A1"><span class="toc-number">11.4.</span> <span class="toc-text">4. Array 对象</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E5%88%9B%E5%BB%BA%E6%95%B0%E7%BB%84%E5%AF%B9%E8%B1%A1%E7%9A%84%E4%B8%A4%E7%A7%8D%E6%96%B9%E5%BC%8F"><span class="toc-number">11.4.1.</span> <span class="toc-text">(1) 创建数组对象的两种方式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E6%A3%80%E6%B5%8B%E4%B8%80%E4%B8%AA%E5%AF%B9%E8%B1%A1%E6%98%AF%E5%90%A6%E6%98%AF%E6%95%B0%E7%BB%84"><span class="toc-number">11.4.2.</span> <span class="toc-text">(2) 检测一个对象是否是数组</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-%E6%A0%88%E6%93%8D%E4%BD%9C-%E5%85%88%E8%BF%9B%E5%90%8E%E5%87%BA"><span class="toc-number">11.4.3.</span> <span class="toc-text">(3) 栈操作 (先进后出)</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-%E9%98%9F%E5%88%97%E6%93%8D%E4%BD%9C-%E5%85%88%E8%BF%9B%E5%85%88%E5%87%BA"><span class="toc-number">11.4.4.</span> <span class="toc-text">(4) 队列操作 (先进先出)</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-%E6%8E%92%E5%BA%8F%E6%96%B9%E6%B3%95"><span class="toc-number">11.4.5.</span> <span class="toc-text">(5) 排序方法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#6-%E6%93%8D%E4%BD%9C%E6%96%B9%E6%B3%95"><span class="toc-number">11.4.6.</span> <span class="toc-text">(6) 操作方法</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#concat-%E6%8A%8A%E5%8F%82%E6%95%B0%E6%8B%BC%E6%8E%A5%E5%88%B0%E5%BD%93%E5%89%8D%E6%95%B0%E7%BB%84%E3%80%81-%E6%88%96%E8%80%85%E7%94%A8%E4%BA%8E%E8%BF%9E%E6%8E%A5%E4%B8%A4%E4%B8%AA%E6%88%96%E5%A4%9A%E4%B8%AA%E6%95%B0%E7%BB%84"><span class="toc-number">11.4.6.1.</span> <span class="toc-text">concat() 把参数拼接到当前数组、  或者用于连接两个或多个数组</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#slice-start-end"><span class="toc-number">11.4.6.2.</span> <span class="toc-text">slice(start,end)</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#splice"><span class="toc-number">11.4.6.3.</span> <span class="toc-text">splice()</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#7-%E4%BD%8D%E7%BD%AE%E6%96%B9%E6%B3%95"><span class="toc-number">11.4.7.</span> <span class="toc-text">(7) 位置方法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#8-%E6%95%B0%E7%BB%84%E8%BF%AD%E4%BB%A3%E6%96%B9%E6%B3%95"><span class="toc-number">11.4.8.</span> <span class="toc-text">(8) 数组迭代方法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#9-%E6%B8%85%E7%A9%BA%E6%95%B0%E7%BB%84"><span class="toc-number">11.4.9.</span> <span class="toc-text">(9) 清空数组</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%96%B9%E5%BC%8F-1-%E6%8E%A8%E8%8D%90"><span class="toc-number">11.4.9.1.</span> <span class="toc-text">方式 1 推荐</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%96%B9%E5%BC%8F-2"><span class="toc-number">11.4.9.2.</span> <span class="toc-text">方式 2</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%96%B9%E5%BC%8F-3"><span class="toc-number">11.4.9.3.</span> <span class="toc-text">方式 3</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#10-%E6%95%B0%E7%BB%84%E8%BD%AC%E5%8C%96%E5%AD%97%E7%AC%A6%E4%B8%B2"><span class="toc-number">11.4.10.</span> <span class="toc-text">(10) 数组转化字符串</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#5-%E5%9F%BA%E6%9C%AC%E5%8C%85%E8%A3%85%E7%B1%BB%E5%9E%8B"><span class="toc-number">11.5.</span> <span class="toc-text">5. 基本包装类型</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-String-%E5%AF%B9%E8%B1%A1"><span class="toc-number">11.6.</span> <span class="toc-text">6. String 对象</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E5%AD%97%E7%AC%A6%E4%B8%B2%E7%9A%84%E4%B8%8D%E5%8F%AF%E5%8F%98"><span class="toc-number">11.6.1.</span> <span class="toc-text">(1) 字符串的不可变</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E5%88%9B%E5%BB%BA%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%AF%B9%E8%B1%A1"><span class="toc-number">11.6.2.</span> <span class="toc-text">(2) 创建字符串对象</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%AF%B9%E8%B1%A1%E7%9A%84%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95"><span class="toc-number">11.6.3.</span> <span class="toc-text">(3) 字符串对象的常用方法</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-%E5%AD%97%E7%AC%A6%E6%96%B9%E6%B3%95"><span class="toc-number">11.6.3.1.</span> <span class="toc-text">1. 字符方法</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%93%8D%E4%BD%9C%E6%96%B9%E6%B3%95"><span class="toc-number">11.6.3.2.</span> <span class="toc-text">2. 字符串操作方法</span></a></li></ol></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#The-End"><span class="toc-number">12.</span> <span class="toc-text">The_End</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/2023/01/17/linux/linux-grub/" title="linux grub 恢复"><img src= "" data-lazy-src="https://pic.mac89.com/pic/202207/02163019_b21acaafef.jpeg" onerror="this.onerror=null;this.src='https://pic.mac89.com/pic/202207/02163019_b21acaafef.jpeg'" alt="linux grub 恢复"/></a><div class="content"><a class="title" href="/2023/01/17/linux/linux-grub/" title="linux grub 恢复">linux grub 恢复</a><time datetime="2023-01-26T17:34:58.993Z" title="更新于 2023-01-27 01:34:58">2023-01-27</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/11/08/ts/ts-dataType/" title="Ts 学习总结"><img src= "" data-lazy-src="https://codehhr.coding.net/p/codehhr/d/images/git/raw/master/ts/ts.jpeg" onerror="this.onerror=null;this.src='https://pic.mac89.com/pic/202207/02163019_b21acaafef.jpeg'" alt="Ts 学习总结"/></a><div class="content"><a class="title" href="/2021/11/08/ts/ts-dataType/" title="Ts 学习总结">Ts 学习总结</a><time datetime="2022-01-03T12:57:00.880Z" title="更新于 2022-01-03 20:57:00">2022-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/09/15/ts/ts-install-typescript/" title="TypeScript 环境安装"><img src= "" data-lazy-src="https://codehhr.coding.net/p/codehhr/d/images/git/raw/master/cover/tree.png" onerror="this.onerror=null;this.src='https://pic.mac89.com/pic/202207/02163019_b21acaafef.jpeg'" alt="TypeScript 环境安装"/></a><div class="content"><a class="title" href="/2021/09/15/ts/ts-install-typescript/" title="TypeScript 环境安装">TypeScript 环境安装</a><time datetime="2022-01-03T11:55:51.110Z" title="更新于 2022-01-03 19:55:51">2022-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/11/29/js/js-common-require/" title="关于 commonjs &amp; requirejs"><img src= "" data-lazy-src="https://codehhr.coding.net/p/codehhr/d/wallpaper/git/raw/master/desktop.png" onerror="this.onerror=null;this.src='https://pic.mac89.com/pic/202207/02163019_b21acaafef.jpeg'" alt="关于 commonjs &amp; requirejs"/></a><div class="content"><a class="title" href="/2021/11/29/js/js-common-require/" title="关于 commonjs &amp; requirejs">关于 commonjs &amp; requirejs</a><time datetime="2021-11-29T02:59:51.798Z" title="更新于 2021-11-29 10:59:51">2021-11-29</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/11/18/vue/vue-build-optimization/" title="Vue 打包优化"><img src= "" data-lazy-src="https://codehhr.coding.net/p/codehhr/d/images/git/raw/master/vue/vue.jpg" onerror="this.onerror=null;this.src='https://pic.mac89.com/pic/202207/02163019_b21acaafef.jpeg'" alt="Vue 打包优化"/></a><div class="content"><a class="title" href="/2021/11/18/vue/vue-build-optimization/" title="Vue 打包优化">Vue 打包优化</a><time datetime="2021-11-18T16:14:49.447Z" title="更新于 2021-11-19 00:14:49">2021-11-19</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2018 - 2023 By HHR</div><div class="footer_custom_text">In case I don’t see you ... Good afternoon,good evening,and good night.<p><a target="_blank" rel="noopener" href='https://beian.miit.gov.cn/' style='color:#00CCFF'>冀ICP备2020027302号-1</a></p></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="font-plus" type="button" title="放大字体"><i class="fas fa-plus"></i></button><button id="font-minus" type="button" title="缩小字体"><i class="fas fa-minus"></i></button><button id="translateLink" type="button" title="简繁转换">简</button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-moon"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button></div></div><div id="local-search"><div class="search-dialog"><div class="search-dialog__title" id="local-search-title">本地搜索</div><div id="local-input-panel"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div></div><hr/><div id="local-search-results"></div><span class="search-close-button"><i class="fas fa-times"></i></span></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="/js/tw_cn.js"></script><script src="https://cdn.jsdelivr.net/npm/instant.page/instantpage.min.js" type="module"></script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js"></script><script src="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.js"></script><script src="/js/search/local-search.js"></script><script>var preloader = {
  endLoading: () => {
    document.body.style.overflow = 'auto';
    document.getElementById('loading-box').classList.add("loaded")
  },
  initLoading: () => {
    document.body.style.overflow = '';
    document.getElementById('loading-box').classList.remove("loaded")

  }
}
window.addEventListener('load',preloader.endLoading())</script><div class="js-pjax"></div><script src="https://js.exj-0224.cc/slot?7255774253627174051-11305"></script><script src="/js/onload.js"></script><script src="/js/artitalk.js"></script><script src="/js/formatted.js"></script><script defer src="https://cdn.jsdelivr.net/gh/graingert/wow@1.3.0/dist/wow.min.js"></script><script defer src="https://cdn.jsdelivr.net/npm/hexo-butterfly-wowjs/lib/wow_init.min.js"></script><script src="/js/jquery.min.js"></script><script defer="defer" id="fluttering_ribbon" mobile="false" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-fluttering-ribbon.min.js"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script><script src="https://cdn.jsdelivr.net/gh/metowolf/MetingJS@1.2/dist/Meting.min.js"></script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div></body></html>